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

关于Layui table设置switch开关和复选框状态以下文字资料是由3搜网小编为大家搜集整理后发布的内容，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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开关和复选框状态”这篇文章的内容，希望分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注3搜网技术频道。