//表格布局 <table class="layui-table layui-form" id="data_list" lay-filter="data_list"> <thead> <tr> <th width="20" lay-data="{sort: true}">序號</th> <th width="110">測試名稱</th> <th width="50">icon</th> <th width="450">地址</th> <th width="250">對應上級</th> <th width="250">是否啟用</th> <th width="50">操作</th> </thead>
//數據整合
<tbody class="x-cate"></tbody>
</table>
--數據表格以父級菜單的cate-id=1，對應子級菜單的fid
--假設這是后台的數據，實際上后端返回的是一個總的數據集合，前端要做的就是數據分組，現在我模擬的是已經分組好的數據..
--父級菜單列表 var arr_cateId=[ {"<tr id="c_1" cate-id=1><td></td><td>1</td><td ><i onclick="find_child(1)" class="layui-icon x-show" status="false"></i>測試案例_1</td><td>layui-icon-cols</td><td></td><td >1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.role_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn layui-btn-xs" onclick="事件方法_1();">事件名稱</a></td></tr>"}, {"<tr id="c_2" cate-id=2><td></td><td>2</td><td ><i onclick="find_child(2)" class="layui-icon x-show" status="false"></i>測試案例_2</td><td>layui-icon-cols</td><td></td><td >1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.role_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn layui-btn-xs" onclick="事件方法_2();">事件名稱</a></td></tr>"}, {"<tr id="c_3" cate-id=3><td></td><td>3</td><td ><i onclick="find_child(3)" class="layui-icon x-show" status="false"></i>測試案例_3</td><td>layui-icon-cols</td><td></td><td >1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.role_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn layui-btn-xs" onclick="事件方法_3();">事件名稱</a></td></tr>"}, {"<tr id="c_4" cate-id=4><td></td><td>4</td><td ><i onclick="find_child(4)" class="layui-icon x-show" status="false"></i>測試案例_4</td><td>layui-icon-cols</td><td></td><td >1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.role_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn layui-btn-xs" onclick="事件方法_4();">事件名稱</a></td></tr>"}, {"<tr id="c_5" cate-id=5><td></td><td>5</td><td ><i onclick="find_child(5)" class="layui-icon x-show" status="false"></i>測試案例_5</td><td>layui-icon-cols</td><td></td><td >1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.role_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn layui-btn-xs" onclick="事件方法_5();">事件名稱</a></td></tr>"} ]; --子級菜單列表var arr_fid=[ {"<tr fid="1" ><td></td><td>2</td><td> ├測試一</td><td></td><td>廣東省珠海市</td><td>1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.f_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn-xs" onclick="事件方法_1();">事件名稱</a></td></tr>"}, {"<tr fid="1" ><td></td><td>3</td><td> ├測試二</td><td></td><td>廣東省廣州市</td><td>1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.f_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn-xs" onclick="事件方法_2();">事件名稱</a></td></tr>"}, {"<tr fid="2" ><td></td><td>5</td><td> ├測試三</td><td></td><td>廣東省深圳市</td><td>1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.f_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn-xs" onclick="事件方法_3();">事件名稱</a></td></tr>"}, {"<tr fid="3" ><td></td><td>7</td><td> ├測試四</td><td></td><td>廣東省揭陽市</td><td>1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.f_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn-xs" onclick="事件方法_4();">事件名稱</a></td></tr>"}, {"<tr fid="4" ><td></td><td>9</td><td> ├測試五</td><td></td><td>廣東省江門市</td><td>1</td><td><input type="checkbox" name="status" value="{{d.role_id}}" data-role_id="{{d.f_id}}" lay-text="開啟|停用" lay-skin="switch" lay-filter="sexDemo" {{d.status ==1?'checked':''}}></td><td class="td-manage"> <a class="layui-btn layui-btn-xs" onclick="事件方法_5();">事件名稱</a></td></tr>"} ];
--遇到的問題一：數據是兩個數組，功能要求是table的字段(序號)要求順序排序，這里拆成兩個數組的原因就是大的數據集合，里面包含父級與子級，一旦遍歷的可能結果是：父級_1->子級_1、父級_1->子級_2、父級_1->子級_3，造成父級渲染多次，
··去重復的話可能有BUG產生，所以這里把數據拆分成兩個數組集合...
--解決方法(合並數組，並添加setTimeout延遲達到項目需求)
arr.map((aItem,aIndex)=>{ aItem.array_count=[...aItem.array_fid,...aItem.array_zid]; $('.x-cate').append(aItem.array_count); }) console.log("綜上所述"); console.log(arr); setTimeout(()=>{ var leng = $('.x-cate tr').length; for(var i=0; i<=leng; i++) { $('.x-cate tr').eq(i).find("td:first").html(i+1); } },50)
