LayUI框架table内使用开关控件

步骤重点：

（1）行内添加开关控件，用templet初始化。

（2）form.on设定监听事件（先定义 var form = layui.form后才能使用 ）

 css部分

<div style="padding:10px 20px;">
    @*明细*@
    <div>
        <table id="InspectionTable" lay-filter="InspectionTable"></table>
    </div>
    @*明细*@
</div>

JS部分

 //加载明细表
    function ReloadTableGrid(applyData) {
        layui.use('table', function () {
            var table = layui.table;
            var form = layui.form;
            table.render({
                elem: '#InspectionTable'
                , data: applyData
                , title: '商检鉴定明细表'
                , cols: [[
                    { field: 'Id', title: '主键',  100, align: 'center', hide: true },
                    { field: 'Type', title: '类型',  100, align: 'center', hide: true }
                    , { field: 'LicenceNo', title: '申请编号', align: 'center',  200, hide: true }
                    , {
                        field: 'LockMark', title: '锁定',  60, align: 'center', templet: function (d) {
                            return d.LockMark == "1" ? '<div><span class="fa fa-lock" style="color:green;cursor:pointer;"></span></div>' : '<div><span class="fa fa-unlock-alt" style="color:red;cursor:pointer;" ></span></div>'
                        }
                    }
                    , { field: 'StatusMark', title: '状态标识', align: 'center',  100, hide: true }
                    , { field: 'B_6', title: '3C目录内/外',  80, align: 'center', hide: true }
                    , { title: '3C目录内/外',  120, align: 'center', templet: '#3CcheckTemp' }
                    , { field: 'B_7', title: '单位',  80, align: 'center' }
                    , { title: '商品规格书',  100, align: 'center', templet: function (d) { return "<a class="layui-btn-nomal layui-btn-xs" lay-event="fileupload" style="color:blue;">查看附件</a>"; } }
                    , { fixed: (formType == "EDIT" ? 'right' : null), title: '操作',  70, align: 'center', templet: (formType == "EDIT" ? '#DemoTemp' : '') }
                ]]
                , height: '600'
                ,  'full'
            });
            //行内控件监听事件
            form.on('switch(3Ccheck)', function (obj) {
                var id = obj.value;
                var tableCache = layui.table.cache.InspectionTable;
                var result = obj.elem.checked ? 1 : 0;
                for (var item in tableCache) {
                    if (tableCache[item].Id == id) {
                        tableCache[item].B_6 = result;
                    }
                }
                ReloadTableGrid(layui.table.cache.InspectionTable);
            });
            //右侧工具栏监听事件
            table.on('tool(InspectionTable)', function (obj) {
                var data = obj.data;
                var tableCache = layui.table.cache.InspectionTable;
                switch (obj.event) {
                    case 'lock':
                        var files = FilesExists(data.Id);
                        if (files < 1) {
                            dialogMsg('未上传附件，无法锁定!', 0);
                        } else {
                            for (var item in tableCache) {
                                if (tableCache[item].Id == data.Id) {
                                    tableCache[item].LockMark = "1";
                                    tableCache[item].StatusMark = "2";
                                }
                            }
                            ReloadTableGrid(layui.table.cache.InspectionTable);
                        }
                        break;
                    case 'unlock':
                        for (var item in tableCache) {
                            if (tableCache[item].Id == data.Id) {
                                tableCache[item].LockMark = "0";
                                tableCache[item].StatusMark = "1";
                            }
                        }
                        ReloadTableGrid(layui.table.cache.InspectionTable);
                        break;
                    case 'fileupload':
                        childkeyValue = data.Id;
                        lock = data.LockMark;
                        initFileUpload(childkeyValue, lock);
                        break;
                    default: break;
                }
            });
        });
    }
    //查看附件
    function initFileUpload(childkeyValue, lock) {
        var type = lock == "1" ? "READONLY" : formType;
        dialogOpen({
            id: 'FileUploadForm',
            title: '查看附件',
            url: '/CustomsManage/CustomsBizLicence/FileUploadForm?formType=' + type + '&keyValue=' + childkeyValue,
             '700px',
            height: '500px',
            btn: ['关闭'],
            callBack: function (iframeId) {
                parent.window.frames["FileUploadForm"].dialogClose();
            }
        });
    }

JS部分2

　　//开关控件设定
　　<script type="text/html" id="3CcheckTemp">
    {{#  if(d.B_6 == "1" && d.LockMark == "1"){ }}
    <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} checked disabled>
    {{#  } else if(d.B_6 == "1" && d.LockMark == "0") { }}
    <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} checked>
    {{#  } else if(d.B_6 == "0" && d.LockMark == "1") { }}
    <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} disabled>
    {{#  } else { }}
    <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}}>
    {{#  } }}
</script>

　　//右侧操作栏控件设定
<script type="text/html" id="DemoTemp">
    {{#  if(d.LockMark == "0"){ }}
    <a class="layui-btn layui-btn-xs" lay-event="lock">锁定</a>
    {{#  } }}
    {{#  if(d.LockMark == "1"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="unlock">解锁</a>
    {{#  } }}
</script>

<script type="text/html" id="LAY-excel-export-ans">
    {{# layui.each(d.data, function(file_index, item){ }}
    <blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            {{# layui.each(item, function(sheet_name, content) { }}
            <li class="layui-this">{{sheet_name}}</li>
            {{# }); }}
        </ul>
        <div class="layui-tab-content">
            {{# layui.each(item, function(sheet_name, content) { }}
            <div class="layui-tab-item layui-show">
                <table class="layui-table">
                    {{# layui.each(content, function(row_index, value) { }}
                    {{# var col_index = 0 }}
                    <tr>
                        {{# layui.each(value, function(col_key, val) { }}
                        <td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td>
                        {{# });}}
                    </tr>
                    {{# });}}
                </table>
            </div>
            {{# }); }}
        </div>
    </div>
    {{# }) }}
</script>