官方演示改变行颜色的js针对没分页的:
这个JS是官方提供的
function highlightRows() {
var highlightRows = X(highlightRowsClientID);
var grid = X(gridClientID);
grid.el.select('.x-grid3-row table.highlight').removeClass('highlight');
Ext.each(highlightRows.getValue().split(','), function (item, index) {
if (item !== '') {
var row = grid.getView().getRow(parseInt(item, 10));
Ext.get(row).first().addClass('highlight');
}
});
}
在分页情况下 该JS就不适用了
修改后的JS 如下:
function highlightRows() {
var highlightRows = X(highlightRowsClientID);
var grid = X(gridClientID);
var pageIndex = grid.getBottomToolbar().getPageData().activePage
var pageSize = 12;//这根据你自己的分页条数设置
grid.el.select('.x-grid3-row table.highlight').removeClass('highlight');
var findflag = false;
Ext.each(highlightRows.getValue().split(','), function(item, index) {
if (item !== '') {
if ((parseInt(item, 10) >= (pageIndex - 1) * pageSize) && (parseInt(item, 10) < pageIndex * pageSize)) {
var row = grid.getView().getRow(parseInt(item, 10) % pageSize);
if (row != null) {
Ext.get(row).first().addClass('highlight');
} else {
return false;
}
}
}
});
}
希望对大家实际开发用帮助 |