在 jQuery EasyUI 的 DataGrid 中，你可以通过使用 view 属性中的 groupField 和 groupFormatter 来创建列组合，实现按照某列的值对数据进行分组显示。以下是一个简单的例子，演示了如何使用列组合：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 列组合示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 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://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           view="#groupview"
           groupField="category"  <!-- 根据哪个字段进行分组 -->
           groupFormatter="groupFormatter">  <!-- 定义分组的显示格式 -->
        <thead>
            <tr>
                <!-- 列定义 -->
                <th field="name" width="100">名称</th>
                <th field="price" width="100" align="right">价格</th>
                <th field="category" width="100">类别</th>
                <!-- 添加更多列... -->
            </tr>
        </thead>
    </table>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        // 示例：分组显示格式化
        function groupFormatter(value, rows) {
            // 返回分组的显示格式
            return value + ' - ' + rows.length + ' 项';
        }
    </script>

</body>
</html>

在上述代码中，通过设置 view 属性为 #groupview，并设置 groupField 为要分组的字段，以及 groupFormatter 为定义分组显示格式的函数。在这个例子中，数据将按照 category 字段进行分组，并使用 groupFormatter 函数定义了分组的显示格式。

你可以根据需要修改 groupField 和 groupFormatter 的值，以满足你的实际需求。确保替换 "your_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。


转载请注明出处：http://www.pingtaimeng.com/article/detail/13113/jQuery EasyUI