parent
4a351f623e
commit
4e9a35f092
@ -1,227 +1,27 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Document</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<style>
|
||||||
<link href="//cdn.staticfile.org/layui/2.8.11/css/layui.css" rel="stylesheet">
|
html, body {
|
||||||
</head>
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
<body>
|
padding: 0;
|
||||||
<div>
|
display: flex;
|
||||||
<div class="layui-container">
|
justify-content: center;
|
||||||
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
|
align-items: center;
|
||||||
<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);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
})
|
.full-page-div {
|
||||||
|
width: calc(100% - 10px);
|
||||||
|
height: calc(100% - 10px);
|
||||||
//添加事件
|
background-color: lightblue;
|
||||||
table.on('toolbar(paramTable)', function (obj) {
|
box-sizing: border-box;
|
||||||
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
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
</style>
|
||||||
|
<title>Full Page Div with Margin</title>
|
||||||
|
</head>
|
||||||
$("#execute").click(function () {
|
<body>
|
||||||
var paramList = JSON.stringify(table.cache["paramTable"]);
|
<div class="full-page-div"></div>
|
||||||
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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in new issue