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

摘要：

行spanView.css.spanScore｛display:block；text-align:center；｝。x-grid3-rowtd，.x-grid3-4ummary-rowtd{右填充：0px；左填充：0p；上填充：0x；下填充：0px；}。x-grid3-行{border right

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行，其他字段也不许合并)，默认为空
*/
functiongridSpan(grid, rowOrCol, cols, sepCol){
    var array1 = newArray();
    var arraySep = newArray();
    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] = newArray();
        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');
varstateGrid;
Ext.acceptDept.main = function() {
    varmainGrid;
    varwin;
    //创建显示窗口
    return{
        init : function() {
            this.initBasicForm();
            this.initWin();
        },
        initBasicForm : function() {
            var tb = newExt.Toolbar({
                items : [{
                    xtype : 'tbseparator'}, {
                    xtype : 'tbbutton',
                    text : '关闭',
                    iconCls : 'silk_cancel',
                    handler : function() {
                        close()
                    }
                }]
            });
            
            var itemStore = newExt.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 = newExt.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 : functionresponsesFlag (value) {
                    if (value == 1) {
                        return "是";
                    } else{
                        return "否";
                    }
                }
            }, {
                header : '当前状态',
                dataIndex : 'DISPOSE_TYPE',
                width : 100,
                renderer : functiondisposeType (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 = newExt.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'}
                });
            });
            
            functiondealDetail(value, cellmeta, record, rowIndex, columnIndex, store){
                if(value!='填报')
                  return "<a   onclick='dealWindow(2,0,0)'>查看处理</a>";
            }
            
            var stateStore=newExt.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 = newExt.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 : [newExt.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 = newExt.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();
        }
    };
    
    functiongridSpan(grid, rowOrCol, cols, sepCol) {
        var array1 = newArray();
        var arraySep = newArray();
        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] = newArray();
             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";
                   }
               }
           }
    }
    
    //查询
    functionclose() {
        win.close();
    }
}();

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

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

相关文章

Nginx code 常用状态码学习小结

swiper横向轮播（兼容IE8）

sql:关于Oracle的update from语句

vue+elemnet开发遇到的问题

Python股票历史数据的获取

mysql查询最近12天的数据，没有数据自动补0

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表