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',width:100,align:'left',hidden:true},
{header : '发送时间',dataIndex : 'SEND_DATE',width:70,align:'left'},
{header : '处理时间',dataIndex : 'DISPOSE_DATE',width:70,align:'left'},
{header : '类型',dataIndex : 'TYPE',width:70,align:'left'},
{header : '人员代码',dataIndex : 'PERSON_CODE',width:110,hidden:true},
{header : '人员',dataIndex : 'PERSON_NAME',width:110,align:'left'},
{header : '操作',dataIndex : 'TYPE',width:70,renderer: dealDetail,align:'left'}
],
viewConfig : { width: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, " ");
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";
//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);
浙公网安备 33010602011771号