Layui table设置switch开关和复选框状态

Layui table设置switch开关和复选框状态

<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 table设置switch开关和复选框状态
也可以去看下layui模板引擎的用法,官网:
https://www.layui.com/doc/modules/laytpl.html#syntax

上一篇:淘宝/天猫/京东/拼多多618抢购软件,抢购助手支持淘金币任务,附上源码


下一篇:(Android)五分钟让你轻松学会ListView单选和多选功能