在 jQuery EasyUI 的 DataGrid 中，列组合常用于将多个相关字段归入同一父列，提升表格可读性。实现该功能只需在 columns 配置中使用 rowspan 与 colspan 属性。本文通过完整示例说明具体写法与注意事项，帮助开发者快速应用。
列组合的实现原理
EasyUI 的 DataGrid 支持通过定义 columns 数据来创建列组合。列组合的本质是在表头中使用 HTML 的 rowspan（跨行）与 colspan（跨列）属性，将多个单元格合并为一个逻辑组。每个 columns 元素对应一组单元格，通过设置这两个属性即可实现父子列的层级关系。
例如，将 listprice、unitcost、attr1、status 四个字段组合在“Item Details”父列下，只需在第一行表头设置 colspan="4"，并在第二行分别定义这四个子列。
HTML 结构实现步骤
以下代码展示了完整的 DataGrid 列组合实现方式。表格通过 class="easyui-datagrid" 自动初始化，数据源由 url 指定，表头通过两行 tr 实现组合结构。
Item ID
Product ID
Item Details
List Price
Unit Cost
Attribute
Stauts
该示例使用平面数据填充表格，通过两行表头结构实现列组合。第一行中，Item ID 与 Product ID 使用 rowspan="2" 跨两行显示，Item Details 使用 colspan="4" 横跨四个子列。第二行则分别定义四个子列的字段与样式。
关键属性说明与注意事项
在实现列组合时，需重点关注以下属性与配置细节：
- rowspan：指定单元格跨行数。值为 2 表示该列在表头中占据两行高度，适用于不参与组合的独立列。
- colspan：指定单元格跨列数。值为 4 表示该父列覆盖下方四个子列，需确保子列数量与 colspan 值一致。
- field：绑定数据源中的字段名，子列必须设置该属性以正确映射数据。
- width 与 align：控制列宽与内容对齐方式，建议根据实际数据长度合理分配宽度。
注意事项：
- 确保子列数量与父列的 colspan 值完全匹配，否则会导致表头错位。
- 若使用 JSON 配置 columns 而非 HTML 声明，需以二维数组形式定义，外层数组表示行，内层数组表示列。
- 数据源结构需与 field 字段对应，列组合仅影响表头展示，不改变数据绑定逻辑。
