Ext.grid：自定义函数,查询结果根据不同的结果显示不同的颜色

iteye_10724

于 2009-12-28 17:46:27 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

文章标签： EXT

本文链接：https://blog.youkuaiyun.com/iteye_10724/article/details/81803435

本文介绍了一种在表格中根据员工年龄使用自定义函数改变字体颜色的方法。通过编写JavaScript函数pctChange，当年龄小于等于30岁时显示为绿色，大于30岁则变为红色。该方法适用于Extjs框架下的表格组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[/code]  有时候根据查询出来的结果，比如年龄，或年假天数，变态的用户要求根据不同的数值显示不同的颜色，比如：年龄>30 是红色，年龄<30 显示绿色
  自定义函数 render 来实现
  部门代码如下：
[code="java"]
   //根据条件用来转换年龄的字体颜色
    function pctChange(val){
        if(val <=30){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val > 30){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

	var cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({header : '',width : 30,}),
			{header:'员工姓名',dataIndex:'empName',sortable:false,width:230},
			{header:'职位名称',dataIndex:'positionName',sortable:false,width:240},
			{header:'职位分类',dataIndex:'positionClassName',sortable:false,width:230},
			{header:'职位说明书',dataIndex:'positionClassNumber',sortable:false,width:180},
			{header:'年龄',dataIndex:'age',sortable:false,width:70,renderer:pctChange,//设置年龄显示的颜色
}	]);