LayUI框架table内使用开关控件
步骤重点：
（1）行内添加开关控件，用templet初始化。
（2）form.on设定监听事件（先定义 var form = layui.form后才能使用 ）
css部分
1 <div style="padding:10px 20px;"> 2 @*明细*@ 3 <div> 4 <table id="InspectionTable" lay-filter="InspectionTable"></table> 5 </div> 6 @*明细*@ 7 </div>
JS部分
1 //加载明细表 2 function ReloadTableGrid(applyData) { 3 layui.use('table', function () { 4 var table = layui.table; 5 var form = layui.form; 6 table.render({ 7 elem: '#InspectionTable' 8 , data: applyData 9 , title: '商检鉴定明细表' 10 , cols: [[ 11 { field: 'Id', title: '主键', width: 100, align: 'center', hide: true }, 12 { field: 'Type', title: '类型', width: 100, align: 'center', hide: true } 13 , { field: 'LicenceNo', title: '申请编号', align: 'center', width: 200, hide: true } 14 , { 15 field: 'LockMark', title: '锁定', width: 60, align: 'center', templet: function (d) { 16 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>' 17 } 18 } 19 , { field: 'StatusMark', title: '状态标识', align: 'center', width: 100, hide: true } 20 , { field: 'B_6', title: '3C目录内/外', width: 80, align: 'center', hide: true } 21 , { title: '3C目录内/外', width: 120, align: 'center', templet: '#3CcheckTemp' } 22 , { field: 'B_7', title: '单位', width: 80, align: 'center' } 23 , { title: '商品规格书', width: 100, align: 'center', templet: function (d) { return "<a class=\"layui-btn-nomal layui-btn-xs\" lay-event=\"fileupload\" style=\"color:blue;\">查看附件</a>"; } } 24 , { fixed: (formType == "EDIT" ? 'right' : null), title: '操作', width: 70, align: 'center', templet: (formType == "EDIT" ? '#DemoTemp' : '') } 25 ]] 26 , height: '600' 27 , width: 'full' 28 }); 29 //行内控件监听事件 30 form.on('switch(3Ccheck)', function (obj) { 31 var id = obj.value; 32 var tableCache = layui.table.cache.InspectionTable; 33 var result = obj.elem.checked ? 1 : 0; 34 for (var item in tableCache) { 35 if (tableCache[item].Id == id) { 36 tableCache[item].B_6 = result; 37 } 38 } 39 ReloadTableGrid(layui.table.cache.InspectionTable); 40 }); 41 //右侧工具栏监听事件 42 table.on('tool(InspectionTable)', function (obj) { 43 var data = obj.data; 44 var tableCache = layui.table.cache.InspectionTable; 45 switch (obj.event) { 46 case 'lock': 47 var files = FilesExists(data.Id); 48 if (files < 1) { 49 dialogMsg('未上传附件，无法锁定!', 0); 50 } else { 51 for (var item in tableCache) { 52 if (tableCache[item].Id == data.Id) { 53 tableCache[item].LockMark = "1"; 54 tableCache[item].StatusMark = "2"; 55 } 56 } 57 ReloadTableGrid(layui.table.cache.InspectionTable); 58 } 59 break; 60 case 'unlock': 61 for (var item in tableCache) { 62 if (tableCache[item].Id == data.Id) { 63 tableCache[item].LockMark = "0"; 64 tableCache[item].StatusMark = "1"; 65 } 66 } 67 ReloadTableGrid(layui.table.cache.InspectionTable); 68 break; 69 case 'fileupload': 70 childkeyValue = data.Id; 71 lock = data.LockMark; 72 initFileUpload(childkeyValue, lock); 73 break; 74 default: break; 75 } 76 }); 77 }); 78 } 79 //查看附件 80 function initFileUpload(childkeyValue, lock) { 81 var type = lock == "1" ? "READONLY" : formType; 82 dialogOpen({ 83 id: 'FileUploadForm', 84 title: '查看附件', 85 url: '/CustomsManage/CustomsBizLicence/FileUploadForm?formType=' + type + '&keyValue=' + childkeyValue, 86 width: '700px', 87 height: '500px', 88 btn: ['关闭'], 89 callBack: function (iframeId) { 90 parent.window.frames["FileUploadForm"].dialogClose(); 91 } 92 }); 93 }
JS部分2
1 //开关控件设定 2 <script type="text/html" id="3CcheckTemp"> 3 {{# if(d.B_6 == "1" && d.LockMark == "1"){ }} 4 <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} checked disabled> 5 {{# } else if(d.B_6 == "1" && d.LockMark == "0") { }} 6 <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} checked> 7 {{# } else if(d.B_6 == "0" && d.LockMark == "1") { }} 8 <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}} disabled> 9 {{# } else { }} 10 <input type="checkbox" name="3C" lay-skin="switch" lay-text="目录内|目录外" lay-filter="3Ccheck" value={{ d.Id}}> 11 {{# } }} 12 </script>
13 //右侧操作栏控件设定 14 <script type="text/html" id="DemoTemp"> 15 {{# if(d.LockMark == "0"){ }} 16 <a class="layui-btn layui-btn-xs" lay-event="lock">锁定</a> 17 {{# } }} 18 {{# if(d.LockMark == "1"){ }} 19 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="unlock">解锁</a> 20 {{# } }} 21 </script>
22 <script type="text/html" id="LAY-excel-export-ans"> 23 {{# layui.each(d.data, function(file_index, item){ }} 24 <blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote> 25 <div class="layui-tab"> 26 <ul class="layui-tab-title"> 27 {{# layui.each(item, function(sheet_name, content) { }} 28 <li class="layui-this">{{sheet_name}}</li> 29 {{# }); }} 30 </ul> 31 <div class="layui-tab-content"> 32 {{# layui.each(item, function(sheet_name, content) { }} 33 <div class="layui-tab-item layui-show"> 34 <table class="layui-table"> 35 {{# layui.each(content, function(row_index, value) { }} 36 {{# var col_index = 0 }} 37 <tr> 38 {{# layui.each(value, function(col_key, val) { }} 39 <td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td> 40 {{# });}} 41 </tr> 42 {{# });}} 43 </table> 44 </div> 45 {{# }); }} 46 </div> 47 </div> 48 {{# }) }} 49 </script>
