Extjs grid實現多行合併(rowspan)效果3.4.0
阿新 • • 發佈：2019-01-22
<%@ page language="java" pageEncoding="UTF-8"%> <head> <title>衡量指標回顧條形圖</title> <link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../js/extjs/ext-all.js"></script> <script type="text/javascript" src="../js/extjs/src/locale/ext-lang-zh_CN.js"></script> </head> <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> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { header:"維度", dataIndex:'wd' }, { header:'戰略主題', dataIndex:'topic' },{ header:"戰略目標", dataIndex:'target' }, { header:'衡量指標', dataIndex:'measure' }, { header:'行動方案', dataIndex:'plan' } ]); //資料來源定義 var store = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({url : 'date.jsp'}),//檢視地址，獲取JSON地址資訊 reader : new Ext.data.JsonReader({ totalProperty : 'totalProperty',//總頁數 root : 'root'//資料 },[{name:'wd'},{name:'topic'},{name:'target'},{name:'measure'},{name:'plan'}] ) }); /* **合併單元格的函式，合併表格內所有連續的具有相同值的單元格。呼叫方法示例： **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"; } } } } } store.load(); var grid = new Ext.grid.GridPanel({ cm : cm, store :store, autoExpandColumn:'pipeInfoName', border:false, //stripeRows : true,//斑馬線效果 loadMask:true, height:450, viewConfig: {forceFit:true}, enableColumnHide : false, enableColumnMove : false, enableColumnResize : false }); store.on("load",function(){gridSpan(grid,"row","[wd],[topic],[target],[measure],[plan]");}); var view = new Ext.Viewport({ id:'view', layout:'fit', items:grid }); }); </script>
{"root":[{"topic":"T1 增長戰略","plan":" ","measure":"F1.1 實收金額（K）","target":"F1 實現有效益發展","wd":"財務維度"},{"topic":"T1 增長戰略","plan":"K1 推進收益管理","measure":"F1.2 利潤總額（K）","target":"F1 實現有效益發展","wd":"財務維度"},{"topic":"T1增長戰略","plan":" ","measure":"F2.1 創利額","target":"F2 持續提高單店營業額與利潤","wd":"財務維度"},{"topic":"T1 增長戰略","plan":"K2 減虧計劃","measure":"F2.2 減虧額（K）","target":"F2 持續提高單店營業額與利潤","wd":"財務維度"},{"topic":"T2 生產力戰略","plan":" ","measure":"F3.1 存貨週轉天數","target":"F3 提高資源利用率","wd":"財務維度"},{"topic":"T2 生產力戰略","plan":" ","measure":"F3.2 單位人工成本創利額（K）","target":"F3 提高資源利用率","wd":"財務維度"},{"topic":"T2 生產力戰略","plan":" ","measure":"F4.1 費用率","target":"F4 合理控制成本費用","wd":"財務維度"},{"topic":"T2 生產力戰略","plan":" ","measure":"F4.2 創利率（K）","target":"F4 合理控制成本費用","wd":"財務維度"},{"topic":"T3 顧客和供應商","plan":"K3 實施顧客滿意度提升計劃","measure":"C1.1 顧客滿意度（K）","target":"C1 成為目標顧客購物首選","wd":"客戶維度"},{"topic":"T3 顧客和供應商","plan":"K4 實施供應商滿意度提升計劃","measure":" ","target":"C2成為供應商良好的合作伙伴","wd":"客戶維度"},{"topic":"T4 商品戰略","plan":" ","measure":"P1.1 生鮮熟盤後毛利額（K）","target":"P1提升品類管理能力","wd":"內部流程維度"},{"topic":"T4 商品戰略","plan":" ","measure":"P1.2 自有品牌與專屬商品毛利額（K）","target":"P1提升品類管理能力","wd":"內部流程維度"},{"topic":"T4 商品戰略","plan":" ","measure":"P1.3 產地直採毛利額（K）","target":"P1 提升品類管理能力","wd":"內部流程維度"},{"topic":"T4 商品戰略","plan":"K5 推進超市品種結構梳理，保證基礎陳列效果（K）","measure":" ","target":"P1提升品類管理能力","wd":"內部流程維度"},{"topic":"T4 商品戰略","plan":"K6 夯實商品質量管理基礎","measure":"P2.1 重大質量事故次數","target":"P2 提升商品質量","wd":"內部流程維度"},{"topic":"T4 商品戰略","plan":" ","measure":"P2.2 門店超市商品質量稽核得分（K）","target":"P2提升商品質量","wd":"內部流程維度"},{"topic":"T5 營銷戰略","plan":" ","measure":"P3.1 （日均）促銷收益","target":"P3 提升營銷有效性","wd":"內部流程維度"},{"topic":"T6 服務戰略","plan":"K7 口碑服務提升計劃","measure":" ","target":"P4 打造口碑服務","wd":"內部流程維度"},{"topic":"T6 服務戰略","plan":" ","measure":"P5.1 神祕顧客檢查得分（K）","target":"P5 打造親切服務","wd":"內部流程維度"},{"topic":"T6 服務戰略","plan":" ","measure":"P6.1 便捷服務指標考核達標率","target":"P6 打造便捷服務","wd":"內部流程維度"},{"topic":"T6 服務戰略","plan":" ","measure":"P7.1 季度檢查專項服務得分","target":"P7 打造專業服務","wd":"內部流程維度"},{"topic":"T7 環境戰略","plan":" ","measure":"P8.1 商場季度檢查環境衛生、VI標識和消防安全得分","target":"P8 提供整潔明亮、安全舒適的購物環境","wd":"內部流程維度"},{"topic":" ","plan":" ","measure":"P9.1 商品損耗率","target":"P9 加強安全管理","wd":"內部流程維度"},{"topic":" ","plan":" ","measure":"P9.2 重大事故（糾紛）發生次數","target":"P9 加強安全管理","wd":"內部流程維度"},{"topic":"T8 有競爭力的員工隊伍","plan":"K8 實施敬業度提升計劃","measure":"L1.1 員工敬業度（K）","target":"L1 激發員工源動力","wd":"學習與成長維度"},{"topic":"T8 有競爭力的員工隊伍","plan":"K9 宣導和踐行企業文化","measure":" ","target":"L1 激發員工源動力","wd":"學習與成長維度"},{"topic":"T8 有競爭力的員工隊伍","plan":" ","measure":"L2.1 管理幹部本土化比例","target":"L2 加快員工本土化建設","wd":"學習與成長維度"},{"topic":"T9 高效的資訊系統","plan":"K10 提升R3系統應用能力","measure":" ","target":"L3 有效應用R3系統","wd":"學習與成長維度"},{"topic":"T10 卓越的組織能力","plan":"K11 落實人效專案提升方案","measure":" ","target":"L4 提高運營效率","wd":"學習與成長維度"}]}