EXT 单元格变色，跨行跨列

单元格变色

{header: "年度目标达成率", dataIndex: 'year_reach_rate',width: 130, align: 'center',renderer: ChangeEx
},function ChangeEx(v,cellmeta)  {
//每一列单元格都变色
cellmeta.style='background:red';
//隔行变色，很多博客说是全变色
/*cellmeta.css='red';*/
}

跨行跨列

function mergeGrid(grid, colIndexArray, isAllSome) {isAllSome = isAllSome == undefined ? true : isAllSome; // 默认为true// 1.是否含有数据var gridView = document.getElementById(grid.getView().getId() + '-body');if (gridView == null) {return;}// 2.获取Grid的所有trvar trArray = [];if (grid.layout.type == 'table') { // 若是table部署方式，获取的tr方式如下trArray = gridView.childNodes;} else {trArray = gridView.getElementsByTagName('tr');}// 3.进行合并操作if (isAllSome) { // 3.1 全部列合并：只有相邻tr所指定的td都相同才会进行合并var lastTr = trArray[0]; // 指向第一行// 1)遍历grid的tr，从第二个数据行开始for (var i = 1, trLength = trArray.length; i < trLength; i++) {var thisTr = trArray[i];var isPass = true; // 是否验证通过// 2)遍历需要合并的列for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {var colIndex = colIndexArray[j];// 3)比较2个td的列是否匹配，若不匹配，就把last指向当前列if (lastTr.childNodes[colIndex].innerText != thisTr.childNodes[colIndex].innerText) {lastTr = thisTr;isPass = false;break;}}// 4)若colIndexArray验证通过，就把当前行合并到'合并行'if (isPass) {for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {var colIndex = colIndexArray[j];// 5)设置合并行的td rowspan属性if (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;rowspan++;lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);} else {lastTr.childNodes[colIndex].setAttribute('rowspan', '2');}// lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中thisTr.childNodes[colIndex].style.display = 'none';}}}} else { // 3.2 逐个列合并：每个列在前面列合并的前提下可分别合并// 1)遍历列的序号数组for (var i = 0, colArrayLength = colIndexArray.length; i < colArrayLength; i++) {var colIndex = colIndexArray[i];var lastTr = trArray[0]; // 合并tr，默认为第一行数据// 2)遍历grid的tr，从第二个数据行开始for (var j = 1, trLength = trArray.length; j < trLength; j++) {var thisTr = trArray[j];// 3)2个tr的td内容一样if (lastTr.childNodes[colIndex].innerText == thisTr.childNodes[colIndex].innerText) {// 4)若前面的td未合并，后面的td都不进行合并操作if (i > 0 && thisTr.childNodes[colIndexArray[i - 1]].style.display != 'none') {lastTr = thisTr;continue;} else {// 5)符合条件合并tdif (lastTr.childNodes[colIndex].hasAttribute('rowspan')) {var rowspan = lastTr.childNodes[colIndex].getAttribute('rowspan') - 0;rowspan++;lastTr.childNodes[colIndex].setAttribute('rowspan', rowspan);} else {lastTr.childNodes[colIndex].setAttribute('rowspan', '2');}// lastTr.childNodes[colIndex].style['text-align'] = 'center';; // 水平居中lastTr.childNodes[colIndex].style['vertical-align'] = 'middle';; // 纵向居中thisTr.childNodes[colIndex].style.display = 'none'; // 当前行隐藏}} else {// 5)2个tr的td内容不一样lastTr = thisTr;}}}}
}

store.on('load', function () {//监听表格渲染完毕后调用合并单元格//[0]代表第一列跨行 [1]跨列mergeGrid(grid, [0],[1]);});

EXT 单元格变色，跨行跨列相关推荐

table合并单元格 colspan（跨列）和rowspan（跨行）
原文链接 colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横 ...
小程序跨行跨列多列复杂表格实现
今天来实现个跨行跨列多列表格. 如图,这是个列数不确定,有的单元格还要跨行跨列的复杂表格. 这里暂时最多支持4列,列数再多就放不下了. 实现原理实现原理比较简单,通过多个嵌套的循环将数据取出. 上面 ...
HTML 表格跨行跨列
HTML和CSS第一天 8.8跨行跨列表格(次重点,必须掌握) <!DOCTYPE html> <html lang="en"> <head>& ...
JAVA对excle创建、读取、设置单元格颜色、背景色、跨行跨列
pom.xml依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</a ...
php 中如何设置单元格跨行,HTML表格中单元格跨行跨列
HTML表格中单元格跨行跨列对于标准的表格,每一行的单元格数量是一样的.但在实际使用中,经常会遇到跨行跨列的表格,这个时候,每一行的数量就不一样了. 一.定义所谓"跨行",是 ...
HTML-表格跨行跨列
HTML-表格跨行跨列 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/ ...
excel选中单元格后所在行和列都变色
打开excel,右击页面底部的sheet页,选择"查看代码" 2.复制下方的代码,粘贴进去 Private Sub Worksheet_SelectionChange(ByVal ...
用JS点击实现一个跨行/跨列显示的效果
一.目标样式 1.实现偶数行显色 2.在点击之后,希望被点击那一行都显色 3.实现偶数列显色 4.在点击之后,希望被点击单元格的那一列都显色(这里随机点的第三列)(实则下标为2) 二.分析要实现跨行 ...
itextpdf 表格跨行跨列与可视化图表
文章目录 itextpdf 表格跨行跨列与可视化图表效果图普通表格一(表头背景色) 普通表格二 (隔列变色) 表格跨行跨列可视化图表使用示例普通表格一(表头背景色) 普通表格二 (隔列变色) ...

EXT 单元格变色，跨行跨列

EXT 单元格变色，跨行跨列相关推荐

最新文章

热门文章