Question

有没有人知道如何将“myClass”类添加到SlickGrid中的某个单元格（例如，第5行，第3列）？

Answer 1

要为某些行添加特定的CSS类，请使用http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

中最近添加的“rowClasses”选项

您不能将CSS类添加到特定单元格，只能添加到给定列中的所有单元格 - 使用列定义中的“cssClass”属性。

也许你可以结合使用这两者。另一种方法是使用自定义格式化程序将内部DIV放入单元格中并在其中设置类。由于您可以访问格式化程序中的行/单元格，因此您可以决定如何呈现它。

Answer 2

现在有一种更好的方法可以解决任意单个细胞：

https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

Answer 3

...

$('.slick-cell').addClass('myClass'); // adds "myClass" to all cells...

...

$('.slick-row[row=1] .slick-cell[cell=1]').addClass('myClass'); // adds "myClass" to 2nd column of the 2nd row...

注意：行和列是从零开始的索引...

Answer 4

Tin的答案，但它现在被称为rowCssClasses（由于某种原因，除了所有常规行之外，还被称为“undefined”几次;我做了

if(row == undefined){ return '' }

只是为了解决这个问题。

Answer 5

是的，您可以使用行号和列号将类添加到特定单元格

$(getCellNode(RowNumber, ColumnNumber)).addClass("ClassName");

示例：

$(getCellNode(5, 3)).addClass("invalid");

Answer 6

我想根据单元格中的值更改大量单元格中的背景颜色。我想在显示单元格时，而不是提前计算样式。 asyncPostRender太慢了。我不想更改SlickGrid代码。

我可以使用自定义格式化程序，setTimeout和grid.getCellNode(row, cell) function基于值设置单元格样式。需要setTimeout，以便我们可以在将单元格添加到DOM后设置单元格样式。

以下是基于SlickGrid示例＃1的示例。当＆lt; = 25％完成时，％Complete 单元格为红色，当> = 75％完成时，绿色为阴影，否则为黄色。此示例使用自定义CSS样式，但也可以向每个单元格添加CSS类。 SlickGrid将其单元格实现为div元素，而不是td元素。该示例还演示了如何使用闭包和显式初始化将“grid”传递给格式化程序。如果您在一个页面上有多个网格，则需要这样做。对不起，这个例子不是很短！

这是the same example in a JSFiddle。

var grid;

var post_format_timeout;
var post_format_cells = [];

function highlight_completion(grid, row, cell, value, cellNode) {
  var $c = $(cellNode);
  if (value <= 25)
      col = '#ff8080';
  else if (value >= 75)
      col = '#80ff80';
  else
      col = '#ffff80';
  $c.css('background-color', col);
}

function post_format() {
  var n = post_format_cells.length;
  for (var i=0; i<n; ++i) {
    var info = post_format_cells[i];
    var grid = info[0];
    var row = info[1];
    var cell = info[2];
    var value = info[3];
    var highlight_fn = info[4];
    var cellNode = grid.getCellNode(row, cell);
    highlight_fn(grid, row, cell, value, cellNode);
  }
  post_format_timeout = null;
  post_format_cells = [];
}

function post_format_push(info) {
  if (!post_format_timeout) {
    post_format_timeout = setTimeout(post_format, 0);
    post_format_cells = [];
  }
  post_format_cells.push(info);
}

function format_completion(grid, row, cell, value, colDef, dataContext) {
  post_format_push([grid, row, cell, value, highlight_completion]);
  return grid.getOptions().defaultFormatter(row, cell, value, colDef, dataContext);
}

$(function () {
  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)
    };
  }

  var my_format_completion = function(row, cell, value, colDef, dataContext) {
    return format_completion(grid, row, cell, value, colDef, dataContext);
  }

  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", formatter: my_format_completion},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    explicitInitialization: true
  };

  grid = new Slick.Grid("#myGrid", data, columns, options);
  grid.init();
});

<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/examples/examples.css" type="text/css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/lib/jquery.event.drag-2.2.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.core.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.js"></script>

<div id="myGrid" style="width:500px; height:180px;"></div>

Answer 7

尝试这样的事情：

$(function(){
 $('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});

Answer 8

如前所述，您可以使用cssClass属性将CSS类添加到列的所有单元格（不包括标题）。 cssClass是一个字符串属性，但您可以稍微修改一下光滑的网格代码，使其行为类似于函数/字符串，然后您可以将条件类添加到单个单元格中。这是一个例子（SlickGrid v2.1）

//修改 appendCellHtml 功能并替换

var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (m.cssClass ? " " + m.cssClass : "");

带

 var cssClass = $.isFunction(m.cssClass) ? m.cssClass(row, cell, null /* or value */, m, d) : m.cssClass;
  var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (cssClass ? " " + cssClass : "");

然后使用cssClass，就像格式化程序一样。

Answer 9

我发现的最佳方法是向列格式化程序添加“asyncPostRender”属性。这允许您指定在呈现单元格后将异步调用的函数。在该功能中，您可以访问单元节点和行数据。这适用于单个细胞，而不是整个细胞列。

var columns = [
   { 
       id:'customer', 
       name:'Customer', 
       asyncPostRender: myObject.styleCustCell 
   }
];

myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
    $(cellNode).addClass('myCustomerCssClass');
};

Answer 10

来自Olleicua发布的链接：

假设您有一个包含列的网格：

[“登录”，“姓名”，“生日”，“年龄”，“likes_icecream”，“favorite_cake”]

...并且您想要为今天生日的人突出显示“生日”和“年龄”列，在这种情况下，是指数0和9的行。（网格中的第一行和第十行）

.highlight{ background: yellow } 

 grid.setCellCssStyles("birthday_highlight", {
 0: {
    birthday: "highlight", 
    age: "highlight" 
   },

  9: {
     birthday: "highlight",
     age: "highlight"
   }

}）

如何在SlickGrid中向单元格添加类

10 个答案: