Dojo1.7数据网格根据隐藏列中的文本更改行颜色
Dojo 1.7 datagrid change row colors based on the text in the hidden column
我使用增强的网格来显示消息。网格i定义如下,
function loadgrid(str)
{
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore','dojox/grid/enhanced/plugins/Pagination', 'dojo/dom', 'dojo/domReady!'],
function(lang, EnhancedGrid, ItemFileWriteStore, dom,Pagination)
{
var data =
{
identifier: "id",
items: []
};
var data_list = JSON.parse(str);
for(var i = 0, l = data_list.length; i < l; i++)
{
data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
}
var store = new ItemFileWriteStore({data: data});
if(!document.getElementById("grid"))
{
var layout = [[
{'name': 'S.No', 'field': 'id', 'width': '5%'},
{'name': 'MsgId', 'field': 'msgId', 'width': '1%'},
{'name': 'Status', 'field': 'status', 'width': '1%'},
{'name': 'Sender', 'field': 'sender', 'width': '15%'},
{'name': 'Receiver', 'field': 'rec', 'width': '15%'},
{'name': 'Message', 'field': 'msg', 'width': '35%'},
{'name': 'Time', 'field': 'time', 'width': '20%'},
]];
var grid = new dojox.grid.EnhancedGrid(
{
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["5","10","25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
},document.createElement('div'));
grid.layout.setColumnVisibility(1,false);
grid.layout.setColumnVisibility(2,false);
grid.placeAt("gridDiv");
grid.startup();
}
else
{
var grid = dijit.registry.byId("grid");
grid.setStore(store);
}
});
}
其中str是包含JSON对象的字符串。在这篇文章中,我想更改行的颜色,以便区分已读和未读消息。我怎样才能做到这一点?
最后我得到了的解决方案
function loadgrid(str)
{
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore','dojox/grid/enhanced/plugins/Pagination', 'dojo/dom', 'dojo/domReady!'],
function(lang, EnhancedGrid, ItemFileWriteStore, dom,Pagination)
{
var data =
{
identifier: "id",
items: []
};
var data_list = JSON.parse(str);
for(var i = 0, l = data_list.length; i < l; i++)
{
data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
}
var store = new ItemFileWriteStore({data: data});
if(!document.getElementById("grid"))
{
var layout = [[
{'name': 'S.No', 'field': 'id', 'width': '5%'},
{'name': 'MsgId', 'field': 'msgId', 'width': '1%'},
{'name': 'Status', 'field': 'status', 'width': '1%'},
{'name': 'Sender', 'field': 'sender', 'width': '15%'},
{'name': 'Receiver', 'field': 'rec', 'width': '15%'},
{'name': 'Message', 'field': 'msg', 'width': '35%'},
{'name': 'Time', 'field': 'time', 'width': '20%'},
]];
var grid = new dojox.grid.EnhancedGrid(
{
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["5","10","25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
},document.createElement('div'));
grid.layout.setColumnVisibility(1,false);
grid.layout.setColumnVisibility(2,false);
grid.placeAt("gridDiv");
grid.startup();
}
else
{
var grid = dijit.registry.byId("grid");
grid.setStore(store);
}
});
**dojo.connect(dijit.byId("grid"), 'onStyleRow', this, function (row)
{
var grid = dijit.byId("grid");
var item = grid.getItem(row.index);
if(item)
{
var type = grid.store.getValue(item, "status", null);
if(type == "UNREAD")
{
row.customStyles += "background-color:blue;";
}
}
grid.focus.styleRow(row);
grid.edit.styleRow(row);
});**
}
相关文章:
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- 如何在flash html5画布项目中动态更改文本颜色
- 使用JavaScript淡化文本颜色
- 使用Javascript切换文本颜色
- 我可以使用jqgrid的oncellselect事件根据单元格内容将文本颜色更改为蓝色吗
- 使用jquery更改文本颜色和大小
- 如何使用javascript更改
前色/文本颜色以及boder颜色 - Extjs 树 如何更改子元素的文本颜色
- 选项选定的文本颜色
- JQuery:悬停时文本颜色切换
- 根据覆盖的背景区域的亮度更改文本颜色
- 根据类型更改 jstree 节点文本颜色
- 文本颜色的随机色调不起作用
- 如何在高亮显示时更改文本颜色
- 使用CSS或SVG设置与背景颜色匹配的文本颜色的动画
- Chart.js文本颜色
- 如何更改chardin.js中的文本颜色和样式
- 更改javascript代码段背景和文本颜色
- 如何在安卓网页中更改背景和文本颜色