Làm cách nào để thêm một lớp css vào các hàng cụ thể trong slickGrid?

Question

Tôi đã tìm kiếm ở khắp mọi nơi để tìm hiểu cách thêm một lớp vào một hàng cụ thể trong slickgrid. Có vẻ như đã từng là thuộc tính rowCssClasses nhưng đã biến mất. Bất kỳ trợ giúp về điều này sẽ được đánh giá rất cao.

Cập nhật: I figured it out bằng cách sử dụng getItemMetadata ... vì vậy trước khi bạn render, bạn phải làm một cái gì đó như thế này:

dataView.getItemMetadata = function (row) { 
    if (this.getItem(row).compareThis > 1) { 
     return { 
      'cssClasses': 'row-class' 
     }; 
    } 
}; 

Đó sẽ bơm đó là hàng đẳng cấp 'vào hàng khớp với câu lệnh if. Dường như chức năng getItemMetadata này không tồn tại cho đến khi bạn đặt nó ở đó và slickGrid kiểm tra xem có gì trong đó không. Nó rất khó để tìm ra các tùy chọn nhưng nếu bạn tìm kiếm getItemMetadata trong tệp slick.grid.js, bạn sẽ tìm thấy một số kho báu ẩn! Tôi hi vọng điêu nay se giup được ai đo!

Nếu có cách nào tốt hơn để thực hiện việc này, vui lòng cho tôi biết.

Answer 1

Trong phiên bản mới hơn của SlickGrid, DataView cung cấp getItemMetadata của riêng nó để cung cấp định dạng cho tiêu đề nhóm và tổng số. Nó rất dễ dàng để chuỗi đó với thực hiện của riêng bạn mặc dù. Ví dụ,

function row_metadata(old_metadata_provider) { 
    return function(row) { 
    var item = this.getItem(row), 
     ret = old_metadata_provider(row); 

    if (item && item._dirty) { 
     ret = ret || {}; 
     ret.cssClasses = (ret.cssClasses || '') + ' dirty'; 
    } 

    return ret; 
    }; 
} 

dataView.getItemMetadata = row_metadata(dataView.getItemMetadata); 

Answer 2

Bạn có thể sử dụng chức năng setCellCssStyles: https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

grid.setCellCssStyles (key, băm)

chìa khóa - Một khóa chuỗi. Sẽ ghi đè bất kỳ dữ liệu nào đã được liên kết với khóa này.

băm - Một băm của các lớp CSS bổ sung của ô được khóa theo số hàng và sau đó theo id cột. Nhiều lớp CSS có thể được chỉ định và tách riêng theo không gian.

Ví dụ:

{ 0: { "number_column": "tế bào đậm", "title_column": "tế bào tiêu đề tế bào nhấn mạnh" }, 4: { "percent_column" : "ô được đánh dấu" }}

Tôi đã sử dụng để đánh dấu các trường đã chỉnh sửa trong lưới của mình. Tôi không thích phương thức getItemMetadata.

Answer 3

 myDataView.getItemMetadata = function(index) 
     { 
      var item = myDataView.getItem(index); 
      if(item.isParent === true) { 
       return { cssClasses: 'parentRow' }; 
      } 
      else { 
       return { cssClasses: 'childRow' }; 
      } 
     }; 

// Trong CSS của tôi

 .parentRow { 
      background-color: #eeeeee; 
     } 
     .childRow { 
      background-color: #ffffff; 
     }