如何将类添加到 SlickGrid 中的单元格

Posted

技术标签:

【中文标题】如何将类添加到 SlickGrid 中的单元格【英文标题】:How to add a class to a cell in SlickGrid 【发布时间】:2011-02-14 02:10:54 【问题描述】:

有谁知道如何将“myClass”类添加到 SlickGrid 中的某个单元格(例如,第 5 行第 3 列)?

【问题讨论】:

我找到了一种有效的方法,请在下面查看我的答案:***.com/a/36562844/218294 【参考方案1】:

..

$('.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...

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

【讨论】:

在我调用 grid = new Slick.Grid($("#table"), data, columns, options); ? 这不起作用,因为行是动态创建和删除的,上面的代码只会影响当前显示的DOM节点。【参考方案2】:

要为某些行添加特定的 CSS 类,请使用最近在 http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed 中添加的“rowClasses”选项

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

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

【讨论】:

是的,将两部作品结合起来。我用它来设置一个背景颜色,它覆盖了比格式化程序所能提供的更多的单元格。 这从 1.x 中消失了,现在作为 rowCssClasses 存在于 (alpha) 2.x 分支中。【参考方案3】:

试试这样的:

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

【讨论】:

【参考方案4】:

Tin 的回答,但它现在被称为 rowCssClasses (并且由于某种原因,除了所有常规行之外,还使用“未定义”多次调用;我做了一个

if(row == undefined) return '' 

只是为了度过难关。

【讨论】:

【参考方案5】:

如前所述,您可以使用 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。

【讨论】:

【参考方案6】:

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

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

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

【讨论】:

【参考方案7】:

现在有一种更好的方法可以让您处理任意单个单元格:

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

【讨论】:

我就是这样做的。然后我使用来自这个link的syncGridCellCssStyles函数@【参考方案8】:

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

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

示例:

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

【讨论】:

【参考方案9】:

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

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

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

这里是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>

【讨论】:

getCellNode 为我做了。谢谢!【参考方案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 中的单元格的主要内容,如果未能解决你的问题,请参考以下文章

如何根据条件将类映射到 Element UI 表中的特定行单元格?

Slickgrid 单元格文本选择在 Chrome 或 Firefox 中无法正常工作

如何将 css 类添加到 slickGrid 中的特定行?

如何将图像添加到 GWT 中的 cellTable 中的单元格

如何将工具提示添加到 jtable 中的单元格?

如何通过按下 iPhone 中的按钮将行/单元格动态添加到 UITableView