可以参考layui官网
https://www.layuiweb.com/demo/table/form.html
获取的数据:
table.render({
elem: '#test'
, url: '/StoreServlet/get'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
, where: {"name": name, "address": address}
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, title: '用户数据表'
, cols: [[
{type: 'checkbox', fixed: 'left'}
, {field: 'roomcode', title: '门店编号', width: 100, sort: true}
, {field: 'storename', title: '门店名称', width: 120, edit: 'text'}
, {field: 'store_location', title: '门店地址', width: 200}
, {field: 'status', title: '门店状态', width: 150,templet: '#switchTpl', unresize: true}
, {
field: 'create_time',
title: '创建时间',
width: 350,
templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy年-MM月-dd日 HH:mm:ss')}}</div>"
}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
// , {fixed: 'store_location', title: '门店地址', toolbar: '#barDemo', width: 150}
]]
在页面加入
<script type="text/html" id="switchTpl">
<!-- 这里的 checked 的状态只是演示 value="{{d.id}}" 是将id的值 传单点击的事件 d为当前点击的对象 -->
<input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="正常|闭店" lay-filter="statusDemo" {{ d.status == 0 ? 'checked' : '' }}>
</script>
点击触发的事件
//监听状态操作 点击时触发
form.on('switch(statusDemo)', function(obj){
alert("点击"+this.value)
layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
});