EasyUI中表格Datagrid合并单元格

素颜马尾好姑娘i 2022-05-12 15:12 499阅读 0赞

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

$('#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 数据网格][EasyUI Datagrid]

[70]: /images/20220504/53f32ebe920c4c4ca03f45fa759bf115.png
[EasyUI Datagrid]: http://www.jeasyui.net/plugins/183.html