easyui datagrid 合并单元格

$("#dg").datagrid({
    url: 'xxx.php',
    columns: [[//合并thead
        {field: 'ID',title: 'ID',hidden:true,rowspan:2},
        {field: 'AA',title: 'AA',width:'40%',rowspan:2},
        {field: 'BB',title: 'BB',width:'40%',colspan:2},
        {field: 'FLAG', title: '是否推送',checkbox:true, width: '20%',rowspan:2},
    ],[
        {field: 'BBA',title: 'BBA',width:'50%'},
        {field: 'BBB',title: 'BBB',width:'50%'},
    ]],
    onLoadSuccess:function(data){//合并tbody
        //1.找到想合并单元格的行索引
        var dataIndex = null;
        for (var i = 0; i < data.rows.length; i++) {
            if(data.rows[i].ID.indexOf("部署")!=-1){
                dataIndex = i;
                break;
            }
        }
        //2.设置合并单元格集合
        var merges = [{
            index:dataIndex,
            colspan:3,//合并多少列
            //rowspan:3,//合并多少行
        }];
        //3.遍历合并单元格集合并合并单元格
        for(var i=0; i<merges.length; i++){
            $('#dg').datagrid('mergeCells',{
                index:merges[i].index,//哪行数据
                field:'ID',//哪个字段
                colspan:merges[i].colspan,//合并列数
                //rowspan:merges[i].rowspan,//合并行数
            });
        }
    }
});
详情见官网:https://www.jeasyui.net/tutorial/39.html

 

posted @ 2020-12-17 10:11  TigerRose  阅读(345)  评论(0)    收藏  举报