jEasyUI 合并单元格学习笔记

简介

jEasyUI 是一款基于 jQuery 的 UI 插件库，其中包含了许多常用的 UI 组件。在表格中，我们经常需要合并相邻的单元格来显示一些合并的数据，这就需要使用 jEasyUI 提供的合并单元格功能。

合并单元格

方法

jEasyUI 提供了一个 mergeCells 方法，该方法可以合并指定行、列的单元格。具体用法如下：

javascriptCopy Code
$('#dg').datagrid('mergeCells',{
    index: 2,
    field: 'name',
    rowspan: 2,
    colspan: 1
});

上述代码表示将 dg 表格中第 2 行、name 列的单元格合并成一个占据 2 行 1 列的单元格。

示例

下面是一个简单的示例，演示了如何使用 jEasyUI 合并单元格。代码中的 data 数组包含了一些测试数据，通过遍历数据，动态生成了一个 jEasyUI 表格，并对某些单元格进行了合并：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 合并单元格学习笔记</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script>
        $(function(){
            // 测试数据
            var data = [
                {name:'张三', age:18, gender:'男', birthday:'2000-01-01'},
                {name:'李四', age:20, gender:'男', birthday:'1998-01-01'},
                {name:'王五', age:22, gender:'女', birthday:'1996-01-01'},
                {name:'赵六', age:24, gender:'男', birthday:'1994-01-01'}
            ];

            // 生成表格
            $('#dg').datagrid({
                columns:[[
                    {field:'name',title:'姓名',width:100},
                    {field:'age',title:'年龄',width:100},
                    {field:'gender',title:'性别',width:100},
                    {field:'birthday',title:'生日',width:200}
                ]],
                data:data,
                onLoadSuccess:function(data){
                    // 合并单元格
                    mergeCells('dg', 'name');
                }
            });
        });

        // 合并单元格函数
        function mergeCells(tableID, field){
            var dg = $('#' + tableID);
            var rows = dg.datagrid('getRows');
            var rowIndex = 0;
            var spanRows = 1;

            for(var i=0; i<rows.length-1; i++){
                if(rows[i][field] == rows[i+1][field]){
                    spanRows++;
                }else{
                    dg.datagrid('mergeCells',{
                        index: rowIndex,
                        field: field,
                        rowspan: spanRows,
                        colspan: null
                    });

                    rowIndex += spanRows;
                    spanRows = 1;
                }
            }

            dg.datagrid('mergeCells',{
                index: rowIndex,
                field: field,
                rowspan: spanRows,
                colspan: null
            });
        }
    </script>
</body>
</html>

在浏览器中打开该网页，可以看到以下结果：

jEasyUI 合并单元格示例

示例中的表格中，使用 mergeCells 方法将第一列（姓名）中相邻相同单元格合并成了一个单元格。