Thay đổi màu nền của một hàng cụ thể trong slickgrid?

Question

là có cách nào để thay đổi màu nền của một hàng cụ thể trong bảng slickgrid trong khi để lại khác vì nó là ??? Tôi đang sử dụng

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); 

nơi "có thể chỉnh sửa-col", "mua hàng" & "mua-col" là các lớp CSS chứa các thiết lập thuộc tính cho nền/foreground, vv màu sắc bất cứ khi nào tôi muốn thay đổi màu nền của một hàng cụ thể, tôi phải thay đổi màu của toàn bộ lưới (bằng cách lặp qua chiều dài lưới) hoặc nếu tôi đặt lớp cho một hàng cụ thể, ví dụ:

rowIndex[5] = { 
    price : "editable-col", 
    qty : "editable-col", 
    ccy : "buy-row", 
    side : "buy-col", 
    symbol : "buy-row", 
    enable : "buy-row" 
}; 
grid.setCellCssStyles("", rowIndex); 

nó đặt lớp css cho hàng mong muốn nhưng rõ ràng tất cả các thuộc tính css cho các hàng khác, để tránh điều này tôi cần phải thiết lập lại các lớp css cho các hàng khác nữa đó là tôi nghĩ không tốt về hiệu suất và thời gian khi bạn có hàng ngàn hàng. chỉ muốn biết là có cách nào tốt hơn để làm điều này mà không cần chạm vào các hàng khác. ?? Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Giả sử bạn đang sử dụng Slick.Data.DataView, bạn có thể thay đổi getItemMetadata method để tự động thêm các lớp vào phần tử hàng có chứa. Sau đó, bạn có thể chỉ cần thiết lập lưới của mình để thay đổi kiểu của hàng dựa trên một số giá trị bên trong hàng. Giả dụ Slick.Data.DataView của bạn được gọi 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; 
    } 
} 

này sẽ cho phép bạn tự động thêm lớp "mua hàng" để hàng. Bạn có thể thay đổi hàm để có nhiều điều kiện cho các lớp khác nhau, chỉ cần nhớ rằng các lớp CSS cho mỗi hàng sẽ có điều kiện dựa trên các thuộc tính của đối tượng hàng. ret.cssClasses là chìa khóa ở đây. Đây là chuỗi sẽ nhận được kết quả đầu ra trong hàng HTML: <div class="[ret.cssClasses]">.

Bây giờ bạn có thể làm một cái gì đó như thế này để thay đổi các lớp học của một hàng:

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. 

Answer 2

Vâng, một cách là chỉ cần sử dụng jQuery:

var rowNumber = 3; 
$($('.grid-canvas').children()[rowNumber]).css('background-color','red'); 

Cập nhật

Để có dai dẳng làm nổi bật bạn cần phải thực hiện các chức năng getItemMetadata. Nó có thể được thực hiện như thế này:

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