onStyleRow 事件不会在进行排序、过滤或分页时保留
onStyleRow event does not retain on doing sorting, filtering or pagination
我已经在使用 dojo 1.10 增强网格。在这里,我使用 onStyleRow 事件,我将在其中设置行的样式。它在第一次加载时运行完美,但当我尝试执行 分页、排序和过滤 时,它不知道记住行并在旧行索引上应用新样式。例如,如果我在加载时突出显示 2 和 4 行。现在,当我进行排序时,行数据将发生变化,但这里它再次将新样式应用于第 2 行和第 4 行,而不管行是否发生变化。这是现有代码中的错误吗?
我是这样做的-
dojo.connect(mygrid, 'onStyleRow', this, function(row) {
if (fixedDataItems[row.index] == '1' && hideFixesVisibility == 'Editable') //some condition
row.customStyles += 'background-color: blue !important;';
else
row.customStyles += 'color: black !important;';
});
我没有在文档中找到任何相关内容。有没有人知道这个?
试试这个
http://jsfiddle.net/bnqkodup/374/
HTML
<div id="container" class="claro">
<div id="gridDiv"></div>
</div>
JS
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.on");
dojo.ready(function (on) {
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [{
col1: "normal",
col2: false,
col3: 'But are not followed by two hexadecimal',
col4: 29.91
}, {
col1: "important",
col2: false,
col3: 'Because a % sign always indicates',
col4: 9.33
}, {
col1: "important",
col2: false,
col3: 'Signs can be selectively',
col4: 19.34
}];
var rows = 60;
for (var i = 0, l = data_list.length; i < rows; i++) {
data.items.push(dojo.mixin({
id: i + 1
}, data_list[i % l]));
}
var store = new dojo.data.ItemFileWriteStore({
data: data
});
function formatLink(value){
return '<a href="#">'+value+'</a>';
}
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
formatter: formatLink
}, {
'name': 'Column 2',
'field': 'col2'
}, {
'name': 'Column 3',
'field': 'col3',
'width': '230px'
}, {
'name': 'Column 4',
'field': 'col4',
'width': '230px'
}]
];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'
},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
//dojo.on(grid,"CellClick",function(evt){
/* <=search for the column here */
//var idx = evt.cellIndex;
//var cellNode = evt.cellNode;
//if(cellNode){
//cellNode.style.backgroundColor = "green";
// }
//if(evt.cellIndex==1){
//this.set('style','background-color:red;');
// }
// });
dojo.connect(grid, 'onStyleRow', this, function(row) {
var item = grid.getItem(row.index);
if(item){
//console.log(store);
var type = store.getValue(item,'col1',null);
if(type == "normal"){
row.customStyles += "color:red;";
//row.customClasses += " dismissed";
}
}
});
});
CSS
@import"../lib/dojo/resources/dojo.css";
@import"../lib/dijit/themes/claro/claro.css";
@import"../lib/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import"../lib/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
/*Grid need a explicit width/height by default*/
#grid {
width: 1110px;
height: 494px;
color: #000000;
}
我已经在使用 dojo 1.10 增强网格。在这里,我使用 onStyleRow 事件,我将在其中设置行的样式。它在第一次加载时运行完美,但当我尝试执行 分页、排序和过滤 时,它不知道记住行并在旧行索引上应用新样式。例如,如果我在加载时突出显示 2 和 4 行。现在,当我进行排序时,行数据将发生变化,但这里它再次将新样式应用于第 2 行和第 4 行,而不管行是否发生变化。这是现有代码中的错误吗?
我是这样做的-
dojo.connect(mygrid, 'onStyleRow', this, function(row) {
if (fixedDataItems[row.index] == '1' && hideFixesVisibility == 'Editable') //some condition
row.customStyles += 'background-color: blue !important;';
else
row.customStyles += 'color: black !important;';
});
我没有在文档中找到任何相关内容。有没有人知道这个?
试试这个
http://jsfiddle.net/bnqkodup/374/
HTML
<div id="container" class="claro">
<div id="gridDiv"></div>
</div>
JS
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.on");
dojo.ready(function (on) {
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [{
col1: "normal",
col2: false,
col3: 'But are not followed by two hexadecimal',
col4: 29.91
}, {
col1: "important",
col2: false,
col3: 'Because a % sign always indicates',
col4: 9.33
}, {
col1: "important",
col2: false,
col3: 'Signs can be selectively',
col4: 19.34
}];
var rows = 60;
for (var i = 0, l = data_list.length; i < rows; i++) {
data.items.push(dojo.mixin({
id: i + 1
}, data_list[i % l]));
}
var store = new dojo.data.ItemFileWriteStore({
data: data
});
function formatLink(value){
return '<a href="#">'+value+'</a>';
}
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
formatter: formatLink
}, {
'name': 'Column 2',
'field': 'col2'
}, {
'name': 'Column 3',
'field': 'col3',
'width': '230px'
}, {
'name': 'Column 4',
'field': 'col4',
'width': '230px'
}]
];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'
},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
//dojo.on(grid,"CellClick",function(evt){
/* <=search for the column here */
//var idx = evt.cellIndex;
//var cellNode = evt.cellNode;
//if(cellNode){
//cellNode.style.backgroundColor = "green";
// }
//if(evt.cellIndex==1){
//this.set('style','background-color:red;');
// }
// });
dojo.connect(grid, 'onStyleRow', this, function(row) {
var item = grid.getItem(row.index);
if(item){
//console.log(store);
var type = store.getValue(item,'col1',null);
if(type == "normal"){
row.customStyles += "color:red;";
//row.customClasses += " dismissed";
}
}
});
});
CSS
@import"../lib/dojo/resources/dojo.css";
@import"../lib/dijit/themes/claro/claro.css";
@import"../lib/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import"../lib/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
/*Grid need a explicit width/height by default*/
#grid {
width: 1110px;
height: 494px;
color: #000000;
}