<script type="text/html" id="ToolbarDemo"></script>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="sex" value="{{d.Id}}" lay-skin="switch" lay-text="男|女" disabled lay-filter="switch_filter" {{ d.Sex =="男" ? 'checked' : '' }}>//去掉disabled,我这个开关是设置了禁止改变的
//{{ d.Sex =="男" ? 'checked' : '' }}Sex:字段,值,为真返回值:checked
</script>
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="IsAdmin" value="{{d.Id}}" title="启用" lay-filter="checkbox_filter" {{ d.IsAdmin == 1 ? 'checked' : '' }}>
</script>
table.render({
elem: '#TableId',
url: dinf.url + "GetUserInfoList?CompanyId=" + CompanyId,
toolbar: '#ToolbarDemo',
defaultToolbar: ['filter', '', ''],
cols: [
[
{ type: 'numbers' },
{ align: 'center', type: "checkbox", width: 50 },
{ align: 'center', field: 'Id', width: 40, title: 'Id', hide: true },
{ align: 'center', field: 'Sex', sort: true, width: 120, title: '性别', templet: '#switchTpl' ,unresize: true},
{ align: 'center', field: 'IsAdmin', sort: true, width: 120, title: '权限', templet: '#checkboxTpl',unresize: true },//templet:自定义列模板templet: Admin,
]
]
...
});
//监听switch开关
form.on('checkbox(switch_filter)', function (obj) {
var enable = obj.elem.checked;//状态 true/false
let name = this.name;//对应name="sex"
var id = this.value;//这条数据的id
//自己写提交...
});
//监听复选框
form.on('checkbox(checkbox_filter)', function (obj) {
var enable = obj.elem.checked;
let name = this.name;
var id = this.value;
//自己写...
});
打印一下可以看到
也可以去看下layui模板引擎的用法,官网:
https://www.layui.com/doc/modules/laytpl.html#syntax