更改光滑网格中特定行的背景颜色
Changing background color of a specific row in slickgrid?
有没有办法更改 slickgrid 表中特定行的背景颜色,同时保留其他行???我正在使用
for ( var i = 0; i < grid.length; i++) {
rowIndex[i] = {
price : "editable-col",
qty : "editable-col",
ccy : "buy-row",
side : "buy-col",
symbol : "buy-row",
enable : "buy-row"
};
}
grid.setCellCssStyles("", rowIndex);
其中"editable-col"、"buy-row"和"buy-col"是包含背景/前景等颜色设置属性的 CSS 类,每当我想更改特定行的背景颜色时,我都必须更改为整个网格的颜色(通过循环网格长度),或者如果我为特定行设置类,例如
rowIndex[5] = {
price : "editable-col",
qty : "editable-col",
ccy : "buy-row",
side : "buy-col",
symbol : "buy-row",
enable : "buy-row"
};
grid.setCellCssStyles("", rowIndex);
它为所需行设置 CSS 类,但清除其他行的所有 CSS 属性,为避免这种情况,我也需要重置其他行的 CSS 类,我认为当您有数千行时,这在性能和时间方面并不好。 只是想知道是否有更好的方法可以在不接触其他行的情况下做到这一点。 ?? 任何帮助将不胜感激。
假设您使用的是 Slick.Data.DataView
,您可以修改 getItemMetadata
方法以动态地将类添加到包含的行元素。然后,您可以简单地设置网格,以根据行内的某个值更改行的样式。假设您的Slick.Data.DataView
实例被调用dataView
:
dataView.getItemMetadata = metadata(dataView.getItemMetadata);
function metadata(old_metadata) {
return function(row) {
var item = this.getItem(row);
var meta = old_metadata(row) || {};
if (item) {
// Make sure the "cssClasses" property exists
meta.cssClasses = meta.cssClasses || '';
if (item.canBuy) { // If the row object has a truthy "canBuy" property
meta.cssClasses += ' buy-row'; // add a class of "buy-row" to the row element.
} // Note the leading ^ space.
if (item.qty < 1) { // If the quantity (qty) for this item less than 1
meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
}
/* Here is just a random example that will add an HTML class to the row element
that is the value of your row's "rowClass" property. Be careful with this as
you may run into issues if the "rowClass" property isn't a string or isn't a
valid class name. */
if (item.rowClass) {
var myClass = ' '+item.rowClass;
meta.cssClasses += myClass;
}
}
return meta;
}
}
这将允许您将"购买行"类动态添加到该行中。您可以将函数更改为对不同的类具有多个条件,只需记住,每行的 CSS 类将根据行对象属性有条件。ret.cssClasses
是这里的关键。它是将在 HTML 行中输出的字符串:<div class="[ret.cssClasses]">
.
您现在可以执行以下操作来更改行的类:
var row = dataView.getItem(5);
row.canBuy = true;
dataView.updateItem(row.id, row);
// The row element should now have a class of "buy-row" on it.
row.canBuy = false;
row.qty = 0;
dataView.updateItem(row.id, row);
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone.
row.qty = 10;
row.rowClass = 'blue';
dataView.updateItem(row.id, row);
// It should now have a class of "blue" and the "out-of-stock" class should be gone.
是的,一种方法是简单地使用 jQuery:
var rowNumber = 3;
$($('.grid-canvas').children()[rowNumber]).css('background-color','red');
更新
要获得持久突出显示,您需要实现 getItemMetadata 函数。可以这样完成:
.html
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
.css
.highlight{
background-color: #ff0000 !important;
}
JavaScript
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
data.getItemMetadata = function (row) {
if (this[row].title == 'Task 5'){
return {
cssClasses: 'highlight'
};
}
return null;
}
grid = new Slick.Grid("#myGrid", data, columns, { enableColumnReorder: false });
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用jquery更改html中的背景颜色
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- JS幻灯片与CSS背景颜色变化
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- Javascript通过列表项的函数和css来更改背景颜色
- Javascript没有从数组中选择背景颜色
- 使用圆中的数组更改背景颜色项目
- 如何用jquery动画改变背景颜色,就像一个过渡
- 使用jquery交换并保存背景颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 使用angularjs根据时间更改背景颜色
- 设置Dojo量表的背景颜色
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- 使用javascript更改任意文本的背景颜色
- 在用Javascript更改背景颜色后:hover don'不要改变颜色
- 图像内部的透明背景颜色不受影响
- jQuery mobile-动态更改ui页面背景颜色
- 切换按钮的背景颜色
- JavaScript更改类的背景颜色