分组表格layui_分组的表格

一、解决方案简述

在使用Layui框架进行前端开发时，若要实现分组表格的功能，可以通过Layui提供的table模块来构建。其核心思想是利用Layui table模块的参数配置和事件监听功能，对表格数据按照指定字段进行分组显示，并且能够保证良好的交互体验，如支持排序、筛选等操作。

二、思路一：通过设置tree参数实现简单的分组效果

对于一些简单的父子层级关系明确的数据分组（例如部门 - 员工的关系），可以采用这种方式。代码如下：

html
</p>



    
    <title>Layui分组表格</title>
    


    <table id="demo"></table>
    
    
        layui.use('table', function(){
            var table = layui.table;

            //渲染表格
            table.render({
                elem: '#demo'
                ,url:'/demo/data.json' //模拟接口地址，实际使用时替换为真实接口
                ,cols: [[
                    {type:'numbers'}
                    ,{field:'id', title:'ID', width:80}
                    ,{field:'department', title:'部门名称'}
                    ,{field:'employeeName', title:'员工姓名'}
                ]]
                ,tree: {
                    idName: 'id'  //标识字段
                    ,childName: 'children' //子元素字段名
                }
            });
        });
    



<p>

三、思路二：自定义分组模板，根据特定字段分组

当需要按照某个字段值相同的记录归为一组，但又不是严格的父子层级结构时，我们可以自定义分组模板。例如按销售区域对订单进行分组。

html
</p>



    
    <title>Layui分组表格</title>
    


    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="orderTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
        {{#  var groupData = {}; }}
        {{#  layui.each(d, function(index, item){ }}
            {{#  if(!groupData[item.area]){ }}
                <tr><td colspan="4">{{item.area}}</td></tr>
                {{#  groupData[item.area] = true; }}
            {{#  } }}
            <tr>
                <td>{{item.orderId}}</td>
                <td>{{item.customerName}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.amount}}</td>
            </tr>
        {{#  }); }}
    
    
        layui.use(['table'], function(){
            var table = layui.table;
            table.render({
                elem: '#orderTable'
                ,url:'/data/orderList.json' //模拟接口地址
                ,cols: [[
                    {field:'orderId', title:'订单号'}
                    ,{field:'customerName', title:'客户名称'}
                    ,{field:'productName', title:'产品名称'}
                    ,{field:'amount', title:'金额'}
                ]]
                ,done:function(res){
                    var data = res.data;
                    var newHtml = layui.laytpl($('#groupTpl').html()).render(data);
                    $('#orderTable').next('.layui-table-view').find('table tbody').html(newHtml);
                }
            });
        });
    



<p>

以上两种思路可以根据实际业务需求选择合适的方式去构建分组表格，当然也可以结合自身项目情况进行优化调整，以满足更多复杂场景下的分组展示需求。