大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
一.在ColumnModel中用renderer渲染颜色:
1.不定义样式:
(1).字体颜色:
{ header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "<span style='color:green;'>审核成功</span>"; } else if(v==0){ return "<span style='color:red;'>等待审核</span>"; } } }
图解:
(2).背景颜色:
{ header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "<span style='background:green;'>审核成功</span>"; } else if(v==0){ return "<span style='background:red;'>等待审核</span>"; } } }
图解:
2.定义一个样式:
(1).字体颜色:
//样式 .fontColor{ color:#FF0000; } //Extjs { header:"审核状态", dataIndex:"status", width:100, renderer:function(v,m){ if(v==1){ return "审核成功"; } else if(v==0){ m.css='fontColor'; return "等待审核"; } } }
图解:
(2).背景颜色:
//css样式: .backColor{ background: #FF0000; } 或者 .backColor{ background-color:#FF0000 !important; } //Extjs: { header:"审核状态", dataIndex:"status", width:100, renderer:function(v,m){ if(v==1){ return "审核成功"; } else if(v==0){ m.css='backColor'; return "等待审核"; } } }
注:该方法需要在jsp文件中引入定义了该样式的样式文件
图解:
二.使用GridView改变颜色(需要定义样式):
1.字体颜色:
注:这种方式设置字体颜色有点问题,还未解决。
2.背景颜色:
//css样式: .backColor{ background: #C3FF8F; } 或者 .backColor{ background-color:#C3FF8F !important; } //Extjs: /*-----1.创建数据源-----*/ var epStore = new Ext.data.JsonStore({ autoLoad: true, url:"getEProject.eva?doType=getAuditProject", root:"data", fields: ["id","xmid","project","company","etype","emode","eagency","status"] }); /*-----2.创建GridView-----*/ var epView = new Ext.grid.GridView({ getRowClass : function(record, rowIndex){ if(record.get('status') == 1){ return "backColor"; } } }); /*-----3.创建ColumnModel----*/ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel({ columns:[ sm, { header:"编号", dataIndex:"id", hidden:true },{ header:"项目名称", dataIndex:"project", width:150, sortable:true }, ...... { header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "审核成功"; } else if(v==0){ return "等待审核"; } } } ] }); /*-----4.创建GridPanel----*/ var grid = new Ext.grid.GridPanel({ store:epStore, cm:cm, sm:sm, view: epView, loadMask:{msg:'正在加载数据,请稍侯……'}, height:80, tbar:[ ...... ], bbar: new Ext.PagingToolbar({ pageSize: pageSize, store: epStore, displayInfo: true, displayMsg: '当前显示 {0} - {1} ,共{2}条记录', emptyMsg: "没有数据", items: ['-'] }) });
注:
1.用GridView中的getRowClass方法来实现颜色的渲染,status是在Store中定义的字段
2.要记得在GridPanel中加入view属性的定义!
图示:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157774.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...