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

前端技术 2023/09/01 JavaScript

话不多说，贴上代码

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\'); 
});

本文地址：https://www.stayed.cn/item/1946

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案