You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
7.5 KiB
227 lines
7.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Document</title>
|
|
|
|
<link href="//cdn.staticfile.org/layui/2.8.11/css/layui.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div class="layui-container">
|
|
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
|
|
<form class="layui-form layui-form-pane" action="">
|
|
|
|
|
|
|
|
|
|
<div class="layui-card-body layui-text">
|
|
<div id="tableRes" class="table-overlay">
|
|
<table id="paramTable" lay-filter="paramTable" class="layui-hide"></table>
|
|
<script type="text/html" id="TPL-select-primary">
|
|
{{# var cityList = d.cityList || ["北京","城市-1","城市-2","城市-3"]; }}
|
|
<select name="city" class="layui-border select-demo-primary" lay-ignore>
|
|
{{# layui.each(cityList, function(i, v){ }}
|
|
<option value="{{= v }}" {{= v === d.mq ? 'selected' : '' }}>{{= v }}</option>
|
|
{{# }); }}
|
|
</select>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" style="padding-left: 20px;">
|
|
<button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<script type="text/html" id="toolbarDemo">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm" lay-event="add">增加一行</button>
|
|
<!-- <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button> -->
|
|
<button class="layui-btn layui-btn-sm" lay-event="update">合计刷新</button>
|
|
</div>
|
|
</script>
|
|
<script type="text/html" id="barDemo">
|
|
<!-- <a class="layui-btn layui-btn-xs" lay-event="add">添加</a> -->
|
|
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
|
|
</div>
|
|
</script>
|
|
|
|
<script src="//cdn.staticfile.org/layui/2.8.11/layui.js"></script>
|
|
<script>
|
|
layui.use(['table', 'form', 'jquery', 'laydate'], function () {
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var laydate = layui.laydate;
|
|
var $ = layui.jquery;
|
|
var tableData = new Array();
|
|
var param = {
|
|
tempId: new Date().valueOf(),
|
|
keyParam: '',
|
|
valueParam: '',
|
|
};
|
|
tableData.push(param);
|
|
|
|
// 提交事件
|
|
|
|
|
|
//初始化表单
|
|
table.render({
|
|
elem: "#paramTable",
|
|
id: 'paramTable',
|
|
url: './user.json',
|
|
totalRow: true,
|
|
toolbar: '#toolbarDemo',
|
|
defaultToolbar: [],
|
|
page: false,
|
|
loading: false,
|
|
even: false,
|
|
cols: [[
|
|
{ title: '序号', type: 'numbers' },
|
|
{ field: 'mq', title: '商品规格', minWidth: 300, templet: '#TPL-select-primary' },
|
|
{ field: 'dw', title: '单位', edit: 'text', maxWidth: 80 },
|
|
{ field: 'sl', title: '数量', edit: true, maxWidth: 100, totalRow: true },
|
|
{ field: 'dj', title: '单价', edit: 'text', maxWidth: 100 },
|
|
{ field: 'je', title: '金额', edit: true, maxWidth: 100 },
|
|
{ field: 'bz', title: '备注', edit: 'text', maxWidth: 100 },
|
|
{ fixed: 'right', title: '操作', width: 134, minWidth: 125, align: 'center', toolbar: '#barDemo' },
|
|
// {field: 'tempId',title:'操作', align:'center', fixed:'right',templet:function (d){
|
|
// return '<a class="layui-btn layui-btn-xs" lay-event="del" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-delete"></i>删除</a>';
|
|
// }},
|
|
]],
|
|
done: function (res, curr, count) {
|
|
var options = this;
|
|
|
|
// 获取当前行数据
|
|
table.getRowData = function (tableId, elem) {
|
|
var index = $(elem).closest('tr').data('index');
|
|
return table.cache[tableId][index] || {};
|
|
};
|
|
|
|
var tableViewElem = this.elem.next();
|
|
tableViewElem.find('.select-demo-primary').on('change', function () {
|
|
var value = this.value; // 获取选中项 value
|
|
var data = table.getRowData(options.id, this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
|
|
// 更新数据中对应的字段
|
|
data.mq = value;
|
|
|
|
tableCache = table.cache["paramTable"];
|
|
|
|
console.log(tableCache);
|
|
|
|
|
|
|
|
});
|
|
}
|
|
})
|
|
|
|
|
|
//添加事件
|
|
table.on('toolbar(paramTable)', function (obj) {
|
|
var options = obj.config; // 获取当前表格属性配置项
|
|
var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
|
|
|
|
// 根据不同的事件名进行相应的操作
|
|
switch (obj.event) { // 对应模板元素中的 lay-event 属性值
|
|
case 'add':
|
|
var oldData = table.cache["paramTable"];
|
|
console.log(oldData);
|
|
var newRow = {
|
|
tempId: new Date().valueOf(),
|
|
keyParam: '',
|
|
valueParam: '',
|
|
}
|
|
oldData.push(newRow);
|
|
console.log(oldData);
|
|
table.reload('paramTable', {
|
|
where:{ oldData}
|
|
});
|
|
layer.msg('增加一行');
|
|
break;
|
|
case 'delete':
|
|
layer.msg('删除');
|
|
break;
|
|
case 'update':
|
|
table.reload('paramTable', { data: oldData });
|
|
layer.msg('合计刷新');
|
|
break;
|
|
};
|
|
});
|
|
|
|
|
|
//删除行
|
|
table.on('tool(paramTable)', function (obj) {
|
|
var data = obj.data, event = obj.event, tr = obj.tr;
|
|
switch (event) {
|
|
case "del":
|
|
layer.confirm('真的删除吗？', function (index) {
|
|
obj.del();
|
|
layer.close(index);
|
|
var oldData = table.cache["paramTable"];
|
|
for (var i = 0; i < oldData.length; i++) {
|
|
row = oldData[i];
|
|
if (!row || !row.tempId) {
|
|
oldData.splice(i, 1); //删除一项
|
|
}
|
|
continue;
|
|
}
|
|
table.reload('paramTable', {
|
|
data: oldData
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
$("#execute").click(function () {
|
|
var paramList = JSON.stringify(table.cache["paramTable"]);
|
|
console.log(paramList);
|
|
});
|
|
// 日期
|
|
laydate.render({
|
|
elem: '#date'
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
<script>
|
|
layui.use(function () {
|
|
var table = layui.table;
|
|
// 渲染
|
|
table.render({
|
|
elem: '#test',
|
|
toolbar: '#toolbarDemo',
|
|
// … // 其他属性
|
|
});
|
|
|
|
// 头部工具栏事件
|
|
table.on('toolbar(test)', function (obj) {
|
|
var options = obj.config; // 获取当前表格属性配置项
|
|
var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
|
|
console.log(obj); // 查看对象所有成员
|
|
|
|
// 根据不同的事件名进行相应的操作
|
|
switch (obj.event) { // 对应模板元素中的 lay-event 属性值
|
|
case 'add':
|
|
layer.msg('添加');
|
|
break;
|
|
case 'delete':
|
|
layer.msg('删除');
|
|
break;
|
|
case 'update':
|
|
layer.msg('编辑');
|
|
break;
|
|
};
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |