如何将 div 分配给 slickgrid 属性？答案

【问题标题】：How to assign div to slickgrid property?如何将 div 分配给 slickgrid 属性？
【发布时间】：2018-02-16 06:28:09
【问题描述】：

这是我的 HTML 代码

    <div id="myGrid" style="width:600px;height:500px;"></div>

这是我的 Javascript 代码和我在声明价值

var red=function(){
     return "<div style='background-color:red;'>red</div>"
}
var blue=function(){
    return "<div style='background-color:blue;'>blue</div>"
 }
var green=function(){
    return "<div style='background-color:green;'>green</div>"
}
var grid;
var data = [];
var columns = [
   {id: "title", name: "Title", field: "title", width: 200, cssClass:   "cell-title", editor: Slick.Editors.Text},
   {id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false}
];
var options = {
   editable: true,
   enableAddRow: false,
   enableCellNavigation: true,
   asyncEditorLoading: false,
   rowHeight: 30
};

在我想要更改值的状态下，红色：蓝色，蓝色：绿色，绿色：红色

$(function () {
for (var i = 0; i < 100; i++) {
  var d = (data[i] = {});
  d["title"] = "Task " + i;
  d["priority"] = red;
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onContextMenu.subscribe(function (e) {
  e.preventDefault();
  var cell = grid.getCellFromEvent(e);
  $("#contextMenu")
      .data("row", cell.row)
      .css("top", e.pageY)
      .css("left", e.pageX)
      .show();
  $("body").one("click", function () {
    $("#contextMenu").hide();
  });
});
grid.onClick.subscribe(function (e) {
  var cell = grid.getCellFromEvent(e);
  if (grid.getColumns()[cell.cell].id == "priority") {
    if (!grid.getEditorLock().commitCurrentEdit()) {
      return;
    }
    var states = { red: green, green: blue, blue: red };
    data[cell.row].priority = states[data[cell.row].priority];
    grid.updateRow(cell.row);
    e.stopPropagation();
  }
});
});
$("#contextMenu").click(function (e) {
if (!$(e.target).is("li")) {
  return;
}
if (!grid.getEditorLock().commitCurrentEdit()) {
  return;
}
var row = $(this).data("row");
data[row].priority = $(e.target).attr("data");
grid.updateRow(row);
});

当我使用d[property]=red 时，它显示<div style="background-color:red"></div> 但不是设计值，当我更改五线谱值时，状态值给出空对象（{}）。感谢提前

【问题讨论】：

标签： jquery slickgrid

【解决方案1】：

用格式化程序做这种事情是很常见的。此示例中的状态列是您要执行的操作吗？

http://6pac.github.io/SlickGrid/examples/example2-formatters-event.html

【讨论】：