layui+js之数据表格(实现父级菜单列表所对应的子级菜单列表)--两两拆分，数据整合
//表格布局 <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)
浙公网安备 33010602011771号