菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery EasyUI 教程

jQuery EasyUI 数据网格 – 创建列组合

likuolei

jQuery EasyUI 数据网格 – 创建列组合（Column Group）

列组合（Column Group）是 datagrid 的高级功能，它允许将多个列合并到一个共同的父标题下，形成多级表头（grouped headers）。这在报表、统计表格、复杂数据展示中非常实用，能让表格结构更清晰、层次更分明。

EasyUI 通过在 columns 中使用嵌套数组实现列组合：外层数组定义分组，内层数组定义具体列。

官方参考：

  • 教程：https://www.jeasyui.com/tutorial/datagrid/datagrid7.php
  • 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Column+Group

步骤 1: 引入 EasyUI 资源

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建带列组合的 DataGrid

<table id="dg" class="easyui-datagrid" title="销售报表（列组合示例）" style="width:900px;height:500px"
       data-options="url:'sales_data.php',fitColumns:false,pagination:true,rownumbers:true">
    <thead>
        <tr>
            <!-- 第一级：大分组 -->
            <th data-options="field:'itemid',width:80,align:'center'">商品ID</th>
            <th data-options="field:'productname',width:150">商品名称</th>

            <!-- 分组：基本信息 -->
            <th colspan="3">基本信息</th>

            <!-- 分组：2025年销售数据 -->
            <th colspan="4">2025年销售数据</th>

            <!-- 分组：操作 -->
            <th data-options="field:'action',width:100,align:'center',formatter:actionFormatter">操作</th>
        </tr>
        <tr>
            <!-- 第二级：具体列（与上面分组对齐） -->
            <th data-options="field:'category',width:100">分类</th>
            <th data-options="field:'brand',width:100">品牌</th>
            <th data-options="field:'unitprice',width:80,align:'right'">单价</th>

            <th data-options="field:'q1',width:80,align:'right'">第一季度</th>
            <th data-options="field:'q2',width:80,align:'right'">第二季度</th>
            <th data-options="field:'q3',width:80,align:'right'">第三季度</th>
            <th data-options="field:'q4',width:100,align:'right',formatter:totalFormatter">年度合计</th>

            <!-- 操作列无需子列 -->
        </tr>
    </thead>
</table>

步骤 3: 推荐方式（使用 columns 嵌套数组，更清晰）

<table id="dg" class="easyui-datagrid" title="学生成绩表（列组合）" style="width:1000px;height:500px"
       data-options="url:'scores.php',rownumbers:true,pagination:true">
    <thead data-options="frozenColumns:[[
        {field:'studentid',title:'学号',width:80},
        {field:'name',title:'姓名',width:100}
    ]]">
        <tr>
            <!-- 冻结列：学号和姓名 -->
        </tr>
    </thead>

    <thead data-options="columns:[[
        // 第一组：语文
        {title:'语文', colspan:3},
        // 第二组：数学
        {title:'数学', colspan:3},
        // 第三组：英语
        {title:'英语', colspan:3},
        // 总分
        {field:'total',title:'总分',width:100,align:'center'}
    ],[ 
        // 第二行：具体科目成绩
        {field:'chinese_normal',title:'平时成绩',width:90,align:'center'},
        {field:'chinese_mid',title:'期中考试',width:90,align:'center'},
        {field:'chinese_final',title:'期末考试',width:90,align:'center'},

        {field:'math_normal',title:'平时成绩',width:90,align:'center'},
        {field:'math_mid',title:'期中考试',width:90,align:'center'},
        {field:'math_final',title:'期末考试',width:90,align:'center'},

        {field:'english_normal',title:'平时成绩',width:90,align:'center'},
        {field:'english_mid',title:'期中考试',width:90,align:'center'},
        {field:'english_final',title:'期末考试',width:90,align:'center'}
    ]]"></thead>
</table>

步骤 4: 完整实用示例（销售报表 + 操作 + 格式化）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI - 列组合</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>销售月报 - 多级表头（列组合）</h2>

    <table id="dg" class="easyui-datagrid" style="width:950px;height:500px"
           data-options="url:'sales_data.json',rownumbers:true,pagination:true">
        <thead>
            <tr>
                <th data-options="field:'productid',width:80,rowspan:2">商品ID</th>
                <th data-options="field:'productname',width:150,rowspan:2">商品名称</th>
                <th colspan="3">上半年销售</th>
                <th colspan="3">下半年销售</th>
                <th data-options="field:'total',width:120,rowspan:2,align:'right'">年度总销量</th>
                <th data-options="field:'action',width:100,rowspan:2,formatter:actionFormatter">操作</th>
            </tr>
            <tr>
                <th data-options="field:'jan_mar',width:90,align:'right'">1-3月</th>
                <th data-options="field:'apr_jun',width:90,align:'right'">4-6月</th>
                <th data-options="field:'h1_total',width:100,align:'right',styler:highlightStyler">上半年合计</th>

                <th data-options="field:'jul_sep',width:90,align:'right'">7-9月</th>
                <th data-options="field:'oct_dec',width:90,align:'right'">10-12月</th>
                <th data-options="field:'h2_total',width:100,align:'right',styler:highlightStyler">下半年合计</th>
            </tr>
        </thead>
    </table>

    <script>
        function actionFormatter(value, row, index){
            return '<a href="#" class="easyui-linkbutton" iconCls="icon-search">详情</a>';
        }

        function highlightStyler(value, row, index){
            if (value > 10000){
                return 'background-color:#ffeb3b;color:#f00;font-weight:bold;';
            }
        }
    </script>
</body>
</html>

关键说明

  • 两种实现方式：
  1. 使用 colspan 和 rowspan（适合简单两级表头）。
  2. 使用 columns:[[...],[...]] 嵌套数组（推荐，更清晰，支持多级）。
  • 冻结列 + 列组合：可以使用 frozenColumns 定义冻结部分，再用 columns 定义分组。
  • 注意事项：
  • fitColumns:true 与复杂列组合可能冲突，建议设为 false 并手动控制宽度。
  • 分组标题不支持 sortable，只有叶子列可排序。
  • 支持 styler、formatter 在叶子列中使用。

常见应用场景

  • 成绩报表（语文/数学/英语 下分平时、期中、期末）
  • 财务报表（收入/支出/利润 等分组）
  • 销售统计（按季度、月份、地域分组）

更多示例：

  • 官方列组合：https://www.jeasyui.com/tutorial/datagrid/datagrid7.php
  • 复杂多级表头：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Column+Group

如果需要三层以上表头、列组合 + 冻结列 + 行内编辑、或动态生成列组合的完整示例，请继续提问！

网站 http://yingjuxia.com
文章已创建 3247

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部