layui-soul-table 无限级子表
组件地址
https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/child/basic
1 var childTable = null; 2 var xqTable = null; 3 var myTableIns = null; 4 var soulTable = null; 5 var spread = false; 6 var response = { 7 statusName: 'success' //数据状态的字段名称，默认：code 8 , statusCode: true //成功的状态码，默认：0 9 , msgName: 'message' //状态信息的字段名称，默认：msg 10 , countName: 'total' //数据总数的字段名称，默认：count 11 , dataName: 'rows' //数据列表的字段名称，默认：data 12 }; 13 14 15 var variableCols = [[ 16 { field: 'shortName', title: '变量名称', filter: true }, 17 { field: 'fullName', title: '完整名称', sort: true }, 18 { 19 field: 'type', title: '取值类型', sort: true, templet: function (d) { 20 switch (d.type) { 21 case 0: return "默认值"; 22 case 1: return "SQL语句取值"; 23 case 2: return "变量计算取值"; 24 default: return ""; 25 } 26 } 27 }, 28 { 29 field: 'dataType', title: '参数类型', sort: true, templet: function (d) { 30 switch (d.dataType) { 31 case 0: return "数值类型"; 32 case 1: return "字符类型"; 33 case 2: return "时间类型"; 34 default: return ""; 35 } 36 } 37 }, 38 { field: 'defVal', title: '默认数据' }, 39 { field: 'sourceData', title: 'SQL语句' }, 40 { title: '操作', toolbar: '#barVar', width: 250 } 41 ]]; 42 43 44 var logicCols = [[ 45 { field: 'expression', title: '逻辑表达式', filter: true }, 46 { field: 'remark', title: '描述', sort: true }, 47 { field: 'result', title: '结果', sort: true }, 48 { title: '操作', width: 256, templet: '#barLogic' } 49 ]]; 50 51 52 53 54 55 /** 56 * 事项表展开后的子表配置 57 * @param {any} row 58 */ 59 var childTable = function (row) { 60 var col = childColsData(row); 61 return [ 62 { 63 title: "数值数据" 64 , url: 'TrendChart.aspx?action=loadvar' 65 , page: false 66 , overflow: 'tips' 67 , filter: { 68 bottom: false 69 } 70 , where: function (row) { 71 return { matterId: row.id } 72 } 73 , cols: variableCols 74 , toolEvent: function (obj, pobj) { 75 var self = this; 76 xqTable = this.id; 77 } 78 , response: response 79 , done: function (res) { 80 var cols = this.cols; 81 soulTable.render(this); 82 } 83 } 84 , 85 { 86 title: '计算逻辑' 87 , url: 'TrendChart.aspx?action=loadlogic' 88 , limit: 1000000 89 , page: false 90 , overflow: 'tips' 91 , filter: { 92 bottom: false 93 } 94 , where: function (row) { 95 avalon.log(row) 96 return { matterId: row.id, pid: 0 } 97 } 98 , cols: col 99 , response: response 100 , toolEvent: function (obj, pobj) { 101 var self = this; 102 //avalon.log("计算条件toolEvent",this.id); 103 xqTable = self.id; 104 //LogicDataToolEvent(obj); 105 } 106 , done: function () { 107 avalon.log("计算条件", this.id); 108 soulTable.render(this); 109 } 110 } 111 ] 112 } 113 114 /** 115 * 逻辑子表的列设置 116 * @param {any} row 117 */ 118 var childColsData = function (row) { 119 return [[{ 120 title: '#', width: 50, children: function (row) { 121 //console.log("子表", row) 122 var arr = childLogicTable(row); 123 //console.log("列", arr) 124 return arr; 125 } 126 } 127 , { field: 'expression', title: '逻辑表达式', filter: true }, 128 { field: 'remark', title: '描述', sort: true }, 129 { field: 'result', title: '结果', sort: true }, 130 { title: '操作', width: 256, templet: '#barLogic' } 131 ]]; 132 } 133 /** 134 * 无限级子表的设置 135 * @param {any} row 136 */ 137 var childLogicTable = function (row) { 138 var col = childColsData(row); 139 var title = row.expression + " 结果为真时"; 140 return [ 141 { 142 title: title 143 , url: 'TrendChart.aspx?action=loadlogic' 144 , limit: 1000000 145 , page: false 146 , overflow: 'tips' 147 , filter: { 148 bottom: false 149 } 150 , where: function (row) { 151 avalon.log(row) 152 return { matterId: row.matterId, pid: row.id } 153 } 154 , cols: col 155 , response: response 156 , toolEvent: function (obj, pobj) { 157 var self = this; 158 //avalon.log("计算条件toolEvent",this.id); 159 xqTable = self.id; 160 //LogicDataToolEvent(obj); 161 } 162 , done: function () { 163 avalon.log("计算条件", this.id); 164 soulTable.render(this); 165 } 166 } 167 ] 168 } 169 170 171 var vm = avalon.define({ 172 $id: "controller" 173 , searchdata: {kw:""} 174 , loadData: function () { 175 GetApiDataSync2("TrendChart.aspx?action=load" 176 , 'get' 177 , {} 178 , function (result) { 179 myTableIns.reload({ 180 data: result.rows 181 }) 182 }, true 183 ); 184 } 185 }); 186 187 layui.config({ base: '/Components/layui/extend/' }) 188 .extend({ 189 tableEdit: 'TableColumnEdit/tableEdit' 190 , soulTable: 'layui-soul-table/ext/soulTable' 191 , tableChild: 'layui-soul-table/ext/tableChild' 192 , tableFilter: 'layui-soul-table/ext/tableFilter' 193 , excel: 'layui-soul-table/ext/excel' 194 , tableMerge: 'layui-soul-table/ext/tableMerge' 195 196 }).use(['form', 'element', 'jquery', 'table', 'layer', 'upload', 'tableChild', 'soulTable', 'upload', 'laydate', 'tableEdit'], function () { 197 var $ = layui.$, 198 form = layui.form, 199 table = layui.table; 200 //soulTable = layui.tableChild; 201 soulTable = layui.soulTable; 202 203 layui.form.on('select', function (data) { 204 var result = data.elem.getAttribute("result"); 205 var callback = data.elem.getAttribute("callback"); 206 if (callback) { 207 window[callback] && window[callback](data, result) 208 } 209 }); 210 211 InitData(); 212 vm.loadData(); 213 }); 214 215 function InitData() { 216 myTableIns = layui.table.render({ 217 elem: '#myTable' 218 , height: $(document).height() - $('#myTable').offset().top - 20 219 , limit: 999 220 , soulSort: true 221 , page: false 222 , overflow: 'tips' 223 , filter: { 224 bottom: false 225 } 226 , cols: [[ 227 { 228 title: '#', width: 50, spread: spread, isChild: true 229 , children: function (row) { 230 return childTable(row); 231 } 232 }, 233 { field: 'matterName', title: '事项名称', filter: true }, 234 { field: 'remark', title: '说明' }, 235 { title: '操作', toolbar: '#barRoot', width: 450 } 236 ]] 237 , done: function (res) { 238 var cols = myTableIns.config.cols; 239 /** 240 * 参数cols是table.render({})中的cols属性值 241 * aop代理是基于event点击事件进行操作的， 242 * 因此cols中务必开启event点击事件！ 243 **/ 244 //delete cols[0][0]; 245 246 soulTable.render(this) 247 } 248 }); 249 }
<table id="myTable" lay-filter="myTable" class="layui-hidden" style="display: none"> </table>
脚本需要使用layui 需要自行添加引用
