parent
4a351f623e
commit
4e9a35f092
@ -1,227 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<html lang="en">
|
||||
<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);
|
||||
|
||||
|
||||
|
||||
});
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
//添加事件
|
||||
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
|
||||
});
|
||||
});
|
||||
.full-page-div {
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
background-color: lightblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#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>
|
||||
</style>
|
||||
<title>Full Page Div with Margin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="full-page-div"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue