当前位置：文江博客话题详情

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

发布于 2024-08-30 10:52:41 字数 62 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风也等你 2024-09-06 10:52:42

是的，您可以使用行号和列号

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

示例将类添加到特定单元格：

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

Yes you can add class to a particular cell by using row and column number

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

example:

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

回复收藏 0 原文

幸福不弃 2024-09-06 10:52:42

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

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

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

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

I want to change the background colour in a large number of cells depending on the value in the cell. I want to calculate the style from the value, when the cell is displayed, not in advance. asyncPostRender is too slow. I don't want to change the SlickGrid code.

I was able to set cell style based on value using a custom formatter, setTimeout, and the grid.getCellNode(row, cell) function. setTimeout is needed so that we can set the cell style after the cells have been added to the DOM.

Here's an example based on the SlickGrid example #1. The % Complete cells are shaded red when <= 25% complete, and green when >= 75% complete, otherwise yellow. This example uses custom CSS styles, but it's also possible to add a CSS class to each cell. SlickGrid implements its cells as div elements, not td elements. The example also demonstrates passing "grid" to a formatter, using a closure and explicit initialization. This is needed if you have multiple grids on one page. Sorry, the example is not very short!

Here is 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>

回复收藏 0 原文

被你宠の有点坏 2024-09-06 10:52:42

尝试这样的事情：

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

Try something like this:

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

回复收藏 0 原文

萌能量女王 2024-09-06 10:52:42

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

As mentioned earlier you can use cssClass property to add a CSS class to all the cells of a column (excluding header). cssClass is a string property but you can modify the slick grid code a bit to make it behave like a function/string instead and then you can add conditional classes to individual cells. Here's an example (SlickGrid v2.1)

// Modify the appendCellHtml function and replace

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

with

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

and then use cssClass exactly like a formatter.

回复收藏 0 原文

装迷糊 2024-09-06 10:52:42

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

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

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

Best way I've found is to add an 'asyncPostRender' property to the column formatter. This allows you to specify a function that will be called asynchronously after the cell is rendered. In that function you have access to the cell node and row data. This operates on an individual cell, and not the entire column of cells.

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

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

回复收藏 0 原文

世态炎凉 2024-09-06 10:52:42

来自 Olleicua 发布的链接：

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

[“login”、“name”、“birthday”、“age”、“likes_icecream”、“favorite_cake”]

...您想要突出显示今天生日的人的“生日”和“年龄”列，在本例中，索引为 0 和 9 的行。（网格中的第一行和第十行）。

.highlight{ background: yellow } 

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

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

})

From the link posted by Olleicua:

Suppose you have a grid with columns:

["login", "name", "birthday", "age", "likes_icecream", "favorite_cake"]

...and you'd like to highlight the "birthday" and "age" columns for people whose birthday is today, in this case, rows at index 0 and 9. (The first and tenth row in the grid).

.highlight{ background: yellow } 

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

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

})

回复收藏 0 原文

背叛残局 2024-09-06 10:52:41

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

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

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

回复收藏 0 原文

酒儿 2024-09-06 10:52:41

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

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

回复收藏 0 原文

千紇 2024-09-06 10:52:41

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

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

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

note: rows and columns are zero-based index...

回复收藏 0 原文

冷清清 2024-09-06 10:52:41

Tin 的答案，但它现在被称为 rowCssClasses （并且由于某种原因，除了所有常规行之外，还被“未定义”调用了几次；我做了一个

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

只是为了解决这个问题。

Tin's answer, but it's now called rowCssClasses (and is called with "undefined" a few times in addition to all the regular rows for some reason; I did a