Extjs根据条件设置表格某行背景色示例

话不多说，贴上代码

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs3/ext-all.js"></script>
<script type="text/javascript" src="array-grid.js"></script>
<style type="text/css">
.<span style="font-family: Arial, Helvetica, sans-serif;">my_row_class</span><span style="font-family: Arial, Helvetica, sans-serif;">{ background:gray;}</span>
</style>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

js代码,其中应-----隔开的代码即为关键代码，自己分析吧：

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
]; 

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
} 

/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
} 

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
}); 

// manually load local data
store.loadData(myData); 

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],viewConfig : {forceFit:true
//------------------------------------------------
,getRowClass : function(record,rowIndex,rowParams,store){
if("3m Co"==record.get('company')){
return 'my_row_class';
}
}
//------------------------------------------------
},
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
}); 

// render the grid to the specified div in the page
grid.render('grid-example');
});
赞 (0)

相关推荐

  • 如何用jquery控制表格奇偶行及活动行颜色

    虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;

  • jQuery实现表格奇偶行显示不同背景色 就这么简单

    jQuery实现表格奇偶行显示不同背景色 就这么简单

    做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便.通常我们是怎么实现的呢?就是在每个tr标签上加css样式. 代码如下所示: <html> <style type="text/css"> .odd { background-color:yellow; } .even { background-color:red; } </style> <body> <table border="

  • javascript修改表格背景色实例代码分享

    复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行      {        

  • 利用JQuery和JS实现奇偶行背景颜色自定义效果

    JQuery实现: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten

  • 表格奇偶行设置不同颜色的核心JS代码

    这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显).只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~ 核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载) 复制代码 代码如下: <script src="jquery-1.7.min.js"></script>

  • 一种表格背景色渐变效果的实现

    无标题文档 .menu td{ font-size:12px; color:white; font-weight:bold; background-color:#336699; border:1px solid #336699; border:1px solid #336699; filter:blendtrans(duration=1); text-align:center;} function showfilter(obj){ var tds=obj.getElementsByTagName

  • jquery css 设置table的奇偶行背景色示例

    复制代码 代码如下: <style> .even{background:#FFF38F;} .odd{background:#FFFFEE;} .selected{background:#FF9900;} </style> 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("tr:odd").addClass("odd"); $("t

  • Extjs根据条件设置表格某行背景色示例

    话不多说,贴上代码 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3

  • Android设置TextView首行缩进示例代码

    下面是我总结的两种方式,有需要的可以参考借鉴下. 第一种:傻瓜式,空格充当(8个空格占两个汉字的大小). textView.setText(" 设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进设置首行缩进"); 第二种:转义字符. textView.setText("\u3000\u3000" + "设置首行缩进设置首行缩进设

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

  • JS组件Bootstrap Table表格多行拖拽效果实现代码

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

  • 用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直

  • python设置表格边框的具体方法

    安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Excel 文件 # 打开存好的 Excelapp = xw.App()  # 设置应用 wb = xw.Book('data/小蜜蜂超市销售报表.xlsx')  # 打开文件ws = wb.sheets['Sheet1']  # 选择表格 注意:要养成良好的习惯,数据文件与程序文件要分开存储,一般数据文件

  • Element表格表头行高问题解决

    Element表格表头行高问题解决

    目录 前言 一.问题原因 二.解决方法 Vue 修改 elementUI table tr th 的高度,以及背景颜色 前言 在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示: 在网页上搜索了很多的解决办法,都没有作用.后来折磨了一段时间后解决了这个问题,在此进行记录. 提示:以下是本篇文章正文内容,下面案例可供参考 一.问题原因 在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的li

  • 使用JavaBean根据指定条件设置属性值默认值方式

    目录 JavaBean根据指定条件设置属性值默认值 使用场景 使用范围 使用示例 JavaBean对象成员变量默认值及数组默认值 JavaBean根据指定条件设置属性值默认值 使用场景 当bean数据中已经装配好其他数据,在逻辑以及数据转换完成的最后一步进行数据默认值设置:如果bean的属性较少,可以手动写if条件就行了,如果bean的属性太多,你不希望写太多if的时候,这个方法是很不错的方法: 使用范围 仅限于当前类,不能给父类设置值 也是参考了其他博主的方法,做的优化和修改,由于时间过了很长

随机推荐