logo

EasyUI DataGrid合并单元格2012-07-08

合并一些单元格经常是必要的,这个教程显示了你如何合并单元格:
合并单元格,简单的调用mergeCells方法并传递信息参数就能告诉DataGrid如何合并单元格了。当单元格合并时,每种东西在合并单元格中,除了第一个单元格,都会被隐藏。
创建DataGrid
<table id="tt"></table>

$('#tt').datagrid({

    title:'Merge Cells',

    iconCls:'icon-ok',

    width:600,

    height:300,

    singleSelect:true,

    rownumbers:true,

    idField:'itemid',

    url:'datagrid_data.json',

    pagination:true,

    frozenColumns:[[

        {field:'productid',title:'Product',width:100,

            formatter:function(value){

                for(var i=0; i<products.length; i++){

                    if (products[i].productid == value) return products[i].name;

                }

                return value;

            }

        },

        {field:'itemid',title:'Item ID',width:80}

    ]],

    columns:[[

        {title:'Price',colspan:2},

        {field:'attr1',title:'Attribute',width:150,rowspan:2},

        {field:'status',title:'Status',width:60,align:'center',rowspan:2}

    ],[

        {field:'listprice',title:'List Price',width:80,align:'right'},

        {field:'unitcost',title:'Unit Cost',width:80,align:'right'}

    ]]

});


\
合并单元格

当数据被载入,我们在DataGrid中合并一些单元格,所以放置下列代码在onLoadSuccess函数中。

var merges = [{

    index:2,

    rowspan:2

},{

    index:5,

    rowspan:2

},{

    index:7,

    rowspan:2

}];

for(var i=0; i<merges.length; i++)

    $('#tt').datagrid('mergeCells',{

        index:merges[i].index,

        field:'productid',

        rowspan:merges[i].rowspan

    });
\

相关话题

热门搜索

  • EasyUI
  • DataGrid
  • 合并单元格

扫描二维码分享话题