Extjs 实现多行合并(rowspan)效果实现二

RowspanView.css

<style>
    .spanScore {display:block;text-align:center;}
        .x-grid3-row td, .x-grid3-summary-row td{
            padding-right: 0px;
            padding-left: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
        }
        .x-grid3-row {
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 0px;
        }
        .rowspan-grid .x-grid3-body .x-grid3-row {
            border:none;
            cursor:default;
            width:100%;
        }
        .rowspan-grid .x-grid3-header .x-grid3-cell{
           
            border-left: 2px solid #fff;
        }
        .rowspan-grid .x-grid3-body .x-grid3-row{
            overflow: hidden;
            border-right: 1px solid #ccc;
        }
        .rowspan-grid .x-grid3-body .x-grid3-cell {
            border: 1px solid #ccc;
            border-top:none;
            border-right:none;
        }
        .rowspan-grid .x-grid3-body .x-grid3-cell-first {
           
            border-left: 1px solid #fff;
        }
        .rowspan-grid .x-grid3-body .rowspan-unborder {
           
            border-bottoRowspanView.js
        .rowspan-grid .x-grid3-body .rowspan {
            border-bottom: 1px solid #ccc;
        }
</style>

RowspanView.js

/*
**合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
**store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
**参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
*/
function gridSpan(grid, rowOrCol, cols, sepCol){
    var array1 = new Array();
    var arraySep = new Array();
    var count1 = 0;
    var count2 = 0;
    var index1 = 0;
    var index2 = 0;
    var aRow = undefined;
    var preValue = undefined;
    var firstSameCell = 0;
    var allRecs = grid.getStore().getRange();
    if(rowOrCol == "row"){
        count1 = grid.getColumnModel().getColumnCount();
        count2 = grid.getStore().getCount();
    } else {
        count1 = grid.getStore().getCount();
        count2 = grid.getColumnModel().getColumnCount();
    }
    for(i = 0; i < count1; i++){
        if(rowOrCol == "row"){
            var curColName = grid.getColumnModel().getDataIndex(i);
            var curCol = "[" + curColName + "]";
            if(cols.indexOf(curCol) < 0)
            continue;
        }
        preValue = undefined;
        firstSameCell = 0;
        array1[i] = new Array();
        for(j = 0; j < count2; j++){
            if(rowOrCol == "row"){
                index1 = j;
                index2 = i;
            } else {
                index1 = i;
                index2 = j;
            }
            var colName = grid.getColumnModel().getDataIndex(index2);
            if(sepCol && colName == sepCol)
            arraySep[index1] = allRecs[index1].get(sepCol);
            var seqOldValue = seqCurValue = "1";
            if(sepCol && index1 > 0){
                seqOldValue = arraySep[index1 - 1];
                seqCurValue = arraySep[index1];
            }
             
            if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){
//                 alert(colName + "======" + seqOldValue + "======" + seqCurValue);
                 allRecs[index1].set(colName, "");
                 array1[i].push(j);
                 if(j == count2 - 1){
                     var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                     if(rowOrCol == "row"){
                         allRecs[index].set(colName, preValue);
                       } else {
                           allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                       }
                   }
               } else {
                   if(j != 0){
                       var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                       if(rowOrCol == "row"){
                           allRecs[index].set(colName, preValue);
                       } else {
                           allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                    }
                   }
               firstSameCell = j;
               preValue = allRecs[index1].get(colName);
               allRecs[index1].set(colName, "");
               if(j == count2 - 1){
                   allRecs[index1].set(colName, preValue);
               }
           }
        }
    }
    grid.getStore().commitChanges();
    //添加所有分隔线
    var rCount = grid.getStore().getCount();
    for(i = 0; i < rCount; i ++){
        for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
               aRow = grid.getView().getCell(i,j);
             if(i == 0){
                 aRow.style.borderTop = "none";
                 aRow.style.borderLeft = "1px solid #ccc";
             }else if(i == rCount - 1){
                 aRow.style.borderTop = "1px solid #ccc";
                 aRow.style.borderLeft = "1px solid #ccc";
                aRow.style.borderBottom = "1px solid #ccc";
             }else{
                 aRow.style.borderTop = "1px solid #ccc";
                 aRow.style.borderLeft = "1px solid #ccc";
             }
             if(j == grid.getColumnModel().getColumnCount()-1)
                 aRow.style.borderRight = "1px solid #ccc";
            if(i == rCount-1)     
             aRow.style.borderBottom = "1px solid #ccc";
           }
       }
       //去除合并的单元格的分隔线
       for(i = 0; i < array1.length; i++){
           if(!Ext.isEmpty(array1[i])){
               for(j = 0; j < array1[i].length; j++){
                   if(rowOrCol == "row"){
                       aRow = grid.getView().getCell(array1[i][j],i);
                       aRow.style.borderTop = "none";
                   } else {
                       aRow = grid.getView().getCell(i, array1[i][j]);
                       aRow.style.borderLeft = "none";
                   }
               }
           }
       }
}

Example

acceptDept.jsp

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>
<head>
<%@ include file="/commons/meta.jsp"%>
<%@ include file="/commons/ext.jsp"%>
<script type="text/javascript" src="acceptDept.js"></script>
<style>
.x-grid3-row td, .x-grid3-summary-row td{
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.x-grid3-row {
    border-right-width: 0px;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}
.rowspan-grid .x-grid3-body .x-grid3-row {
    border:none;
    cursor:default;
    width:100%;
}
.rowspan-grid .x-grid3-header .x-grid3-cell{
    border-left: 2px solid #fff;
}
.rowspan-grid .x-grid3-body .x-grid3-row{
    overflow: hidden;
    border-right: 1px solid #ccc;
}
.rowspan-grid .x-grid3-body .x-grid3-cell {
    border: 1px solid #ccc;
    border-top:none;
    border-right:none;
}
.rowspan-grid .x-grid3-body .x-grid3-cell-first {
    border-left: 1px solid #fff;
}
.rowspan-grid .x-grid3-body .rowspan-unborder {
    border-bottom:1px solid #fff;
}
.rowspan-grid .x-grid3-body .rowspan {
    border-bottom: 1px solid #ccc;
}
</style>
<title>按接收部门</title>
</head>
<body>
</body>
</html>

acceptDept.js

Ext.ns('Ext.acceptDept');
var stateGrid;
Ext.acceptDept.main = function() {
    var mainGrid;
    var win;
    // 创建显示窗口
    return {
        init : function() {
            this.initBasicForm();
            this.initWin();
        },
        initBasicForm : function() {
            var tb = new Ext.Toolbar({
                items : [{
                    xtype : 'tbseparator'
                }, {
                    xtype : 'tbbutton',
                    text : '关闭',
                    iconCls : 'silk_cancel',
                    handler : function() {
                        close()
                    }
                }]
            });
            
            var itemStore = new Ext.data.JsonStore({
                url : ctx + '/acceptDept.do?method=getAcceptDept',
                root : 'root',
                totalProperty : 'totalCount',
                autoLoad : true,
                fields : [{
                    name : 'INFO_REGISTER_ID',
                    mapping : 'INFO_REGISTER_ID'
                }, {
                    name : 'OPERATE_DEPT',
                    mapping : 'OPERATE_DEPT'
                }, {
                    name : 'OPERATE_PERSON_DEPT_NAME',
                    mapping : 'OPERATE_PERSON_DEPT_NAME'
                }, {
                    name : 'SEND_PERSON',
                    mapping : 'SEND_PERSON'
                }, {
                    name : 'SEND_PERSON_NAME',
                    mapping : 'SEND_PERSON_NAME'
                }, {
                    name : 'INFO_TYPE_NAME',
                    mapping : 'INFO_TYPE_NAME'
                }, {
                    name : 'OPERATE_DATE',
                    mapping : 'OPERATE_DATE'
                }, {
                    name : 'SEND_DATE',
                    mapping : 'SEND_DATE'
                }, {
                    name : 'RESPONSES_FLAG',
                    mapping : 'RESPONSES_FLAG'
                }, {
                    name : 'RECEIVE_PERSON',
                    mapping : 'RECEIVE_PERSON'
                }, {
                    name : 'RECEIVE_PERSON_NAME',
                    mapping : 'RECEIVE_PERSON_NAME'
                }, {
                    name : 'RECEIVE_DEPT_NAME',
                    mapping : 'RECEIVE_DEPT_NAME'
                }, {
                    name : 'RECEIVE_PERSON_DEPT',
                    mapping : 'RECEIVE_PERSON_DEPT'
                }, {
                    name : 'REGISTER_CONTENT',
                    mapping : 'REGISTER_CONTENT'
                }, {
                    name : 'DISPOSE_CONTENT',
                    mapping : 'DISPOSE_CONTENT'
                }, {
                    name : 'DISPOSE_TYPE',
                    mapping : 'DISPOSE_TYPE'
                }, {
                    name : 'DISPOSE_DATE',
                    mapping : 'DISPOSE_DATE'
                }]
            })
            
            var cm = new Ext.grid.ColumnModel([{
                header : '所队',
                dataIndex : 'RECEIVE_DEPT_NAME',
                width : 300
            }, {
                header : '接收时间',
                dataIndex : 'SEND_DATE',
                width : 120
            }, {
                header : '反馈人员',
                dataIndex : 'SEND_PERSON_NAME',
                width : 100
            }, {
                header : '要求处理',
                dataIndex : 'RESPONSES_FLAG',
                width : 100,
                renderer : function responsesFlag (value) {
                    if (value == 1) {
                        return "是";
                    } else {
                        return "否";
                    }
                }
            }, {
                header : '当前状态',
                dataIndex : 'DISPOSE_TYPE',
                width : 100,
                renderer : function disposeType (value) {
                    if (value == 1) {
                        return "已转发";
                    } else if (value == 2){
                        return "已处理";
                    } else {
                        return "未处理";
                    }
                }
            }, {
                header : '接收人员',
                dataIndex : 'RECEIVE_PERSON_NAME',
                width : 100
            }, {
                header : '反馈类型',
                dataIndex : 'INFO_TYPE_NAME',
                width : 150
            }, {
                header : '反馈内容',
                dataIndex : 'REGISTER_CONTENT',
                width : 300
            }, {
                header : '处理情况',
                dataIndex : 'DISPOSE_CONTENT',
                width : 300
            }, {
                header : '处理时间',
                dataIndex : 'DISPOSE_DATE',
                width : 120
            }]);
            // 专卖基础信息主表
            mainGrid = new Ext.grid.GridPanel({
                tbar : tb,
                region : 'center',
                autoWidth : true,
                height : document.body.clientHeight * 0.5,
                autoScroll : true,
                store : itemStore,
                stripeRows : true,
                frame : true,
                loadMask : {msg:"数据加载中，请稍等..."},
                cm : cm,
                viewConfig : {
                    forceFit : true,
                    autoScroll: true
                }
            });
            
            //加载之前保存查询条件
            itemStore.on('beforeload',function(ds){
                var receive_dept = Ext.getCmp('receive_dept_d').getValue();
                var respon_dept = Ext.getCmp('respon_dept_d').getValue();
                var type = Ext.getCmp('type_d').getValue();
                var unitId = Ext.getCmp('unitId_d').getValue();
                var deptCode = Ext.getCmp('deptCode_d').getValue();
                var operPersonCode = Ext.getCmp('operPersonCode_d').getValue();    
                var yearMonth = Ext.getCmp('yearMonth_d').getValue();    
//                alert("receive_dept=="+receive_dept+"；\n respon_dept=="+respon_dept+"；\n type=="+type+"；\n unitId=="+unitId+"；\n deptCode=="+deptCode+"；\n operPersonCode=="+operPersonCode+"；\n yearMonth=="+yearMonth);
                ds.baseParams ={
                           receivePersonDept : receive_dept,
                           operateDept : respon_dept,
                           type : type,
                           operateOrg : unitId,
                           sendDate : yearMonth,
                           deptCode : deptCode,
                           operPersonCode : operPersonCode
                }
            });

            // 默认选中第一行
            mainGrid.store.on("load", function() {
                mainGrid.getSelectionModel().selectFirstRow();
                gridSpan(mainGrid,"row","[RECEIVE_DEPT_NAME]","");
            });
            mainGrid.getSelectionModel().on("rowselect", function(t, rowIndex, record) {
                stateGrid.getStore().load({
                    params : {
                           infoRegisterId : record.get('INFO_REGISTER_ID'),
                           personCode : '-1',
                           unitId : '-1',
                           deptCode : '-1'
                    }
                });
            });
            
            function dealDetail(value, cellmeta, record, rowIndex, columnIndex, store){
                if(value!='填报')
                  return "<a style='color: blue;cursor:hand;' onclick='dealWindow(2,0,0)'>查看处理</a>";
            }
            
            var stateStore=new Ext.data.JsonStore({
                url :  ctx + "/acceptDept.do?method=getStateInfo",
                root : 'root',
                totalProperty : 'totalCount',
                autoLoad : false,
                fields : [
                        {name:'INFO_REGISTER_ID',mapping:'INFO_REGISTER_ID'},
                        {name:'INFO_RESPONSES_ID',mapping:'INFO_RESPONSES_ID'},
                        {name:'SEND_DATE',mapping:'SEND_DATE'},
                        {name:'DISPOSE_DATE',mapping:'DISPOSE_DATE'},
                        {name:'TYPE',mapping:'TYPE'},
                        {name:'PERSON_CODE',mapping:'PERSON_CODE'},
                        {name:'PERSON_NAME',mapping:'PERSON_NAME'},
                        
                        {name:'DISPOSE_CONTENT',mapping:'DISPOSE_CONTENT'},
                        {name:'DISPOSE_TYPE',mapping:'DISPOSE_TYPE'},
                        {name:'INFO_TYPE_NAME',mapping:'INFO_TYPE_NAME'},
                        {name:'INVOLVE_CUST',mapping:'INVOLVE_CUST'},
                        {name:'ANTISTOP',mapping:'ANTISTOP'},
                        {name:'OPERATE_PERSON',mapping:'OPERATE_PERSON'},
                        {name:'OPERATE_PERSON_NAME',mapping:'OPERATE_PERSON_NAME'},
                        {name:'OPERATE_DATE',mapping:'OPERATE_DATE'},
                        {name:'REGISTER_CONTENT',mapping:'REGISTER_CONTENT'},
                        {name:'RESPONSES_DAY',mapping:'RESPONSES_DAY'}
                   ] 
            });
            stateGrid = new Ext.grid.GridPanel({
                    title:'处理流程',
                    region:'south',
                    autoScroll: true,
                    enableHdMenu : false,
                    height : document.body.clientHeight * 0.34,
                     width : 440,
                    store : stateStore,
                    border: true,
                    frame : false,
                    loadMask:{msg:"数据加载中，请稍等..."},
                    columns : [new Ext.grid.RowNumberer(),
                            {header : 'Id',dataIndex : 'INFO_REGISTER_ID',100,align:'left',hidden:true},
                            {header : '发送时间',dataIndex : 'SEND_DATE',70,align:'left'},
                            {header : '处理时间',dataIndex : 'DISPOSE_DATE',70,align:'left'},
                            {header : '类型',dataIndex : 'TYPE',70,align:'left'},
                            {header : '人员代码',dataIndex : 'PERSON_CODE',110,hidden:true},
                            {header : '人员',dataIndex : 'PERSON_NAME',110,align:'left'},
                            {header : '操作',dataIndex : 'TYPE',70,renderer: dealDetail,align:'left'}
                    ],
                    viewConfig : { 500,autoScroll:true,forceFit : false}
            });
            //默认选中第一行
            stateGrid.store.on("load",function(){
                stateGrid.getSelectionModel().selectFirstRow();
                gridSpan(stateGrid,"row","","");
               });
        },
        
        initWin : function() {
            win = new Ext.Window({
                layout : 'form',
                modal : true,
//                closable : false,
//                draggable : false,
                title : '按接收部门',
                height : document.body.clientHeight * 0.9,
                width : document.body.clientWidth - 100,
                resizable : false,
                items : [mainGrid, stateGrid,
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "receive_dept_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "respon_dept_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "type_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "unitId_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "deptCode_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "operPersonCode_d"},
                        {labelWidth : 10,xtype: "hidden",layout: 'form',id: "yearMonth_d"}
]
            });
        win.show();
        win.center();
        }
    };
    
    function gridSpan(grid, rowOrCol, cols, sepCol) {
        var array1 = new Array();
        var arraySep = new Array();
        var count1 = 0;
        var count2 = 0;
        var index1 = 0;
         var index2 = 0;
         var aRow = undefined;
         var preValue = undefined;
         var firstSameCell = 0;
         var allRecs = grid.getStore().getRange();
         if (rowOrCol == "row") {
             count1 = grid.getColumnModel().getColumnCount();
             count2 = grid.getStore().getCount();
         } else {
             count1 = grid.getStore().getCount();
             count2 = grid.getColumnModel().getColumnCount();
         }
        for (i = 0; i < count1; i++) {
            if (rowOrCol == "row") {
                 var curColName = grid.getColumnModel().getDataIndex(i);
                 var curCol = "[" + curColName + "]";
                 if (cols.indexOf(curCol) < 0)
                 continue;
             }
             preValue = undefined;
             firstSameCell = 0;
             array1[i] = new Array();
             for (j = 0; j < count2; j++) {
                 if (rowOrCol == "row") {
                     index1 = j;
                     index2 = i;
                 } else {
                     index1 = i;
                     index2 = j;
                 }
                 var colName = grid.getColumnModel().getDataIndex(index2);
                 if (sepCol && colName == sepCol)
                 arraySep[index1] = allRecs[index1].get(sepCol);
                 var seqOldValue = seqCurValue = "1";
                 if (sepCol && index1 > 0) {
                     seqOldValue = arraySep[index1 - 1];
                     seqCurValue = arraySep[index1];
                 }
                if (allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)) {
                     //alert(colName + "======" + seqOldValue + "======" + seqCurValue);
                     allRecs[index1].set(colName, "&nbsp;");
                     array1[i].push(j);
                     if (j == count2 - 1) {
                         var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                         if (rowOrCol == "row") {
                             allRecs[index].set(colName, preValue);
                           } else {
                               allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                           }
                       }
                   } else {
                       if (j != 0) {
                           var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                           if (rowOrCol == "row") {
                               allRecs[index].set(colName, preValue);
                           } else {
                               allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                           }
                       }
                       firstSameCell = j;
                       preValue = allRecs[index1].get(colName);
                       allRecs[index1].set(colName, "&nbsp;");
                       if (j == count2 - 1) {
                           allRecs[index1].set(colName, preValue);
                       }
                   }
               }
           }
           grid.getStore().commitChanges();
           //添加所有分隔线
         var rCount = grid.getStore().getCount();
           for (i = 0; i < rCount; i ++) {
               for (j = 0; j < grid.getColumnModel().getColumnCount(); j ++) {
                   aRow = grid.getView().getCell(i,j);
                 if (i == 0) {
                     aRow.style.borderTop = "none";
                     aRow.style.borderLeft = "1px solid #ccc";
                 } else if (i == rCount - 1) {
                     aRow.style.borderTop = "1px solid #ccc";
                     aRow.style.borderLeft = "1px solid #ccc";
                     aRow.style.borderBottom = "1px solid #ccc";
                 } else {
                     aRow.style.borderTop = "1px solid #ccc";
                     aRow.style.borderLeft = "1px solid #ccc";
                 } if(j == grid.getColumnModel().getColumnCount()-1)
                     aRow.style.borderRight = "1px solid #ccc";
                   if(i == rCount-1)     
                     aRow.style.borderBottom = "1px solid #ccc";
                 //aRow.style.borderBottom = "1px solid #ccc";
               }
           }
           //去除合并的单元格的分隔线
           for (i = 0; i < array1.length; i++) {
               for (j = 0; j < array1[i].length; j++) {
                   if (rowOrCol == "row") {
                       aRow = grid.getView().getCell(array1[i][j],i);
                       aRow.style.borderTop = "none";
                   } else {
                       aRow = grid.getView().getCell(i, array1[i][j]);
                       aRow.style.borderLeft = "none";
                   }
               }
           }
    }
    
    // 查询
    function close() {
        win.close();
    }
}();

//Ext.onReady(Ext.acceptDept.main.init, Ext.acceptDept.main);