一、layui.table单元格控件(时间控件laydate、单元格下拉控件xm-select等)
1、设定表头处,利用templet为其单元格加上id,方便其后以此id来指定控件。
2、善用每列的event，可通过检测所点击的单元格所在的行和列来触发相应事件。（如点击时才弹出控件laydate)
3、设置Done使得控件下拉框不被遮挡
Done:
var tableDone = function(res){// 設置下拉框不會被表格遮擋//$(".layui-table-cell").css('overflow','visible');$(".layui-table-body").css('overflow','visible');$(".layui-table-box").css('overflow','visible');$(".layui-table-view").css('overflow','visible');tableMerge.render(this);form.render();}// // elem, id, url, where, limit, cols, page, height, toolbar, defaultToolbar, loading, filters, title, cellMinWidth, data, done// // limit為必填項mytable.tableShow('#LAY_table_front', 'LAY_table_front', '', '', 20, frontcol, false, 'auto', false, '', false, '','', 15, frontData,tableDone)
(1)checkbox等
col = [{field:'spotresult', title:'結果', templet:function(d){var str = '<input type="checkbox" id="spotresult" value="'+d['spotresult']+'" lay-skin="switch" lay-text="Y|N" lay-filter="spotresult">' if(d['spotresult'] === 'Y'){str = '<input type="checkbox" id="spotresult" value="'+d['spotresult']+'" lay-skin="switch" lay-text="Y|N" lay-filter="spotresult" checked>'}return str}}]
(2)laydate(需要同时设定event+templet)
checkCols = [{field:'checkMessage7', title:'效果檢討', edit: true,event: 'checkMessageEvent7',unresize: false,templet: function(d){return getplancontent(d,checkData,field='checkMessage7')}}]//templetfunction getplancontent(d,oridata,field=''){// d[field] = layui.util.toDateString(d[field], 'yyyy-MM-dd')if (d[field]===undefined){d[field] = ''}var modifydate = '';var id = field+d['id']modifydate = '<span id="'+id+'">'+d[field]+'</span>';for(var i=0;i<oridata.length;i++){if(oridata[i]['id'] === d['id']){oridata[i][field] = d[field]break}}return modifydate; }//event 用于点击时触发控件// 表格事件触发事件table.on('tool(LAY_table_plan)', function(obj){var data = obj.data;switch (obj.event){case 'checkMessageEvent6':getTimerfun(obj,'LAY_table_plan',checkData,'checkMessage6')breakcase 'checkMessageEvent7':getTimerfun(obj,'LAY_table_plan',checkData,'checkMessage7')breakdefault:break}});//給單元格渲染日期框function getTimerfun(obj,tableid,oridata,field){var id = '#'+field+obj.data['id']laydate.render({elem: id,trigger:'click',show:true,done:function(value){for(var i=0;i<oridata.length;i++){if(oridata[i]['id'] === obj.data['id']){oridata[i][field] = value}}var namedemoobj = $("span[id='"+field+obj.data['id']+"'] ")namedemoobj.text(value)form.render()}});}
(3)xm-select
col = [{field:'checkMessage6', title:'設計製作', edit: true,unresize: false,templet: function(d){return getplancontent(d,field='checkMessage6')}}]function getplancontent(d,field=''){//若只想渲染某列中的某幾行（如A列中B行），則可通過d['id']來指定行，通過參數field來指定列//if (d['id']===B){} //每一列中的B行//if (field ===A){} //A列中的每一行//if (field=== A && d['id']===B){} //A列中的B行var modifydate = '';var id = field+d['id']modifydate = '<div id="'+id+'" name="checkMessageName" class="xm-select-demo" ></div>';return modifydate}
※对于多个范围相同的单元格，可根据id循环赋控件。
//对于多个范围相同的单元格，可根据id循环赋控件。（此处以每行第一列作控件为例）function Getplanman(namedict = {}){for (var i=1;i<=7;i++){let field = 'checkMessage'+ivar id = field+1//此处以每列第一行作例子 故id皆为checkMessagei1(i为列数）let valuedata = []//若之前有數據則帶入if (namedict[field]!== undefined){valuedata = [{'Name':namedict[field]}]}// 姓名下拉-樹形下拉xmSelect.render({el: '#'+id, autoRow: false,filterable: true,cascader: {//是否显示级联模式show: true,//间距indent: 200,//是否严格遵守父子模式strict: true,},// iconfont: {// 隱藏父子節點//parent: 'hidden'// },height: '220px',name: 'checkMessageName',model: { label: { type: 'text' } },radio: true,clickClose: true,initValue:valuedata,//帶入初始數據prop:{name:"Name",value:"Name"},on:function(data){var arr = data.change,person = arr[0];checkData[0][field]=person.Name// table.reload('LAY_table_plan', {//data: checkData// })},data: nameData//下拉框的數據範圍，此函數该应用于取得nameData后})}}//函数外 获取值并刷新Getplanman(checkData[0])form.render()
