EasyUI中表格Datagrid合并单元格

“岁月无多人易老,乾坤虽大愁难著”
相信很多用过datagrid的同学都有这样的经历,就是合并单元格了。我今天也做了这个功能,在这里分享一下:
在这里插入图片描述
在研究了百度和官网上的说明之后,我写了如下代码:

$('#testReportList').datagrid({
        rownumbers:true,
        pageSize:25,
        pageList: [15,25,35,45],
        fit:true,
        showFooter: true,
        singleSelect:true,
        checkOnSelect: true,
        selectOnCheck: true,
        columns:[
            [{field:'countyName',title:'区域',rowspan:2,width:50},
				{"title":"应考人次","colspan":4},
                {"title":"未考人次","colspan":4},
                {"title":"实考人次","colspan":4},
				{field:'examQualifiedNum',title:'合格人数',rowspan:2,width:80},
                {field:'referenceRate',title:'参考率',rowspan:2,width:80},
                {field:'qualifiedRate',title:'合格率',rowspan:2,width:80}],
            [{"field":"salesClerkExamTestNum","title":"营业员","rowspan":1},
                {"field":"channelManagerExamTestNum","title":"渠道经理","rowspan":1},
                {"field":"officeManagerExamTestNum","title":"厅经理","rowspan":1},
                {"field":"testCount","title":"合计","rowspan":1,
                    formatter:function (value,row,index) {
                        return row.officeManagerExamTestNum + row.channelManagerExamTestNum + row.salesClerkExamTestNum;
                    }},
				{"field":"salesClerkNoTestNum","title":"营业员","rowspan":1},
                {"field":"channelManagerNotestNum","title":"渠道经理","rowspan":1},
                {"field":"officeManagerNoTestNum","title":"厅经理","rowspan":1},
                {"field":"noTestCount","title":"合计","rowspan":1,
                    formatter:function (value,row,index) {
                        return row.officeManagerNoTestNum + row.channelManagerNotestNum + row.salesClerkNoTestNum;
                    }},
				{"field":"salesClerkExamActualTestNum","title":"营业员","rowspan":1},
                {"field":"channelManagerExamActualTestNum","title":"渠道经理","rowspan":1},
                {"field":"officeManagerExamActualTestNum","title":"厅经理","rowspan":1},
                {"field":"actualTestCount","title":"合计","rowspan":1,
					formatter:function (value,row,index) {
                		return row.officeManagerExamActualTestNum + row.channelManagerExamActualTestNum + row.salesClerkExamActualTestNum;
                    }
                }]],
        pagination:true,
        loadMsg:'正在加载...',
        onDblClickRow:function(rowIndex,rowData) {
            
        },
        onLoadSuccess:function(data){
            if(data.total==0){
                $.messager.alert('提示','查无数据!');
            }
        }
    });

附上官网说明路径:EasyUI Datagrid 数据网格

猜你喜欢

转载自blog.csdn.net/A_Runner/article/details/83316455