Question

这是我的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>但不设计值，当我更改表示值为空对象（{}）的五线谱值时。感谢Advance

Answer 1

使用格式化程序执行此类操作很常见。此示例中的状态列是您尝试做的吗？

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

如何将div分配给slickgrid属性？

1 个答案: