EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色
来源:互联网 发布:js兄弟节点 编辑:程序博客网 时间:2024/06/01 03:59
第一步. 设置样式
.reportColor4{
background: #93A9C1;
}
.reportColor5{
background: #EEEEEE;
}
第二步.修改单元格样式
header : '流通类型',
width : 80,
sortable : true,
align : 'center',
dataIndex: 'BR_TYPE',
// css : 'background: #acdaf4;', // ----- 设置整个单元格的样式,但是不能根据条件变化
renderer:function(v,cellmeta){
if(v==1){ // 判断值类型
cellmeta.css="reportColor4"; // 设置样式
return "<span style='color:white'>借出</span>"; // 改变输出字体颜色
}else if(v==2){
cellmeta.css="reportColor5";
return "<span style='color:green'>归还</span>";
}else{
return "<span style='color:blue'>未知</span>";
}
}
第二步.修改整行颜色
根绝value值修改整行的颜色,需要配置在grid的viewConfig中
viewConfig : {forceFit : true,
getRowClass:function(record,index,p,ds) {
var cls = 'white-row';
switch (record.data.STATUS) {
case '0' : cls = 'x-grid-record-green'; break;
case '1' : cls = 'x-grid-record-yellow'; break;
case '2' : cls = 'x-grid-record-orange'; break;
case '3' : cls = 'x-grid-record-red'; break;
case '4' : cls = 'x-grid-record-gray'; break;
}
return cls;
}
}
当然,字体样式也是需要定义的
.x-grid-record-gray table{ color: #948d8e; }
.x-grid-record-red table{ color: red; }
.x-grid-record-yellow table{ color: blue; }
.x-grid-record-green table{ color: green; }
.x-grid-record-orange table{ color: orange; }
========= 备注=================
renderer方法很常用,先看下renderer: function()里的参数
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。
- EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色
- ExtJS GridPanel根据条件改变字体颜色
- 根据绑定的值的不同改变gridview里某一单元格的字体或背景颜色
- Extjs Grid根据行内容设置不用字体颜色
- Extjs grid设置单元格字体颜色,及单元格背景色
- Extjs grid设置单元格字体颜色,及单元格背景色
- Extjs grid设置单元格字体颜色,及单元格背景色
- ExtJS Grid 改变单元格背景颜色的方法
- ExtJS Grid 改变单元格背景颜色的方法
- EXTJS GRID 改变单元格背景颜色的方法
- aspxGridview 根据单元格值得不同,设置单元格字体的颜色
- EXCEL-VBA:根据单元格字体、背景颜色计数、求和
- [原创]可改变单元格字体和背景颜色的CListCtrl
- sdk改变ListCtrl某一行的字体颜色或者背景颜色
- 改变DataGrid单元格字体颜色
- extjs的grid控件如何根据值来设置某行的背景颜色
- Extjs gridpanel行加载颜色
- Ext.grid.GridPanel根据某列改变行的颜色
- 就这个页面做提交的思路,将部分变量的变成数组做法
- Oracle常用语句大全
- JavaScript之六:BOM
- AngularJS 五大特性,加快 Web 应用开发
- docker---centos6上安装
- EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色
- 传智播客Hadoop实战视频教程(14讲)
- 【Javaweb】Eclipse中手动安装插件
- domino服务器“Insufficient TCPsockets are available”的解决办法
- C#调用Excel报 error CS1969: 找不到编译动态表达式所需的一个或多个类型。是否缺少引用?
- 判断一个单向链表中是否有环
- 什么是C#编程语言明明白白学C#
- RFC中关于IPv6 DNS的介绍
- cocos2d-x 3.2 之 三消类游戏——万圣大作战 (第三篇)