如何使用AJAX创建SlickGrid,计算字段,可排序列,粘贴等？

Question

我正在研究的项目打算使用SlickGrid来显示可过滤和可排序的数据 - 最多可达200​​万行.其他要求是:

1. 某些列具有可编辑数据,但其他列具有不应编辑的参考数据.
2. 应在可编辑字段中支持批量复制和粘贴.
3. 通过将公式应用于同一行中的其他值来计算某些字段值.

由于可能存在大量行,因此应使用AJAX加载数据.从其他问题中可以看出,有些人建议修改示例中的代码(如果是这样,最合适的起点是什么？).其他人建议使用插件(例如http://labs.nereo.com/slick.html提供复制和粘贴功能或者像安德鲁儿童那样的分支(可能更多风险,因为没有官方支持？)还有很多话要说但是我的问题真的是从这一切开始的最佳方式 - 是否有其他人有类似的要求并通过经验学习？

感谢任何指针,不管多小......

Answer 1

我对你的要点的想法:

可编辑/不可编辑的列

这就像editor在列定义中定义一样简单.

var columns = [
    { id: 'Editable', field: 'EditableData', editor: Slick.Editors.Text },
    { id: 'NonEditable', field: 'NonEditableData' }
];

编辑器相当容易创建,并且创建复合编辑器的能力提供了很大的灵活性.

如果您需要应用更多业务逻辑来使列中的单个单元格不可编辑或可编辑,则有两种选择:

• 订阅grid.onBeforeCellEdit事件以在特定条件下取消单元格切换到编辑模式.

• 扩展Slick.Data.DataView.getItemMetadata以为项目提供自定义元数据,您可以在其中禁用单元格的编辑器.一个简单的例子:

  function getItemMetadata(i) {
      var item = rows[i];
  
      return {
          columns: {
              // disable the editor
              'InitiallyEditableColumn': { editor: null }
          }
      };
  }
  

批量复制粘贴

有一个示例,说明如何使用Slick.CellCopyManager网格本身处理复制粘贴.

可以通过您提到的插件从外部电子表格复制粘贴.

列公式

Slick.Plugin可以创建A 以从两个操作数列到结果列计算定义的公式.处理此grid.onCellChange事件似乎最适合这一点.基本结构如下所示:

function ColumnFormula(args) {
    this.operands = args.operandColumns;
    this.result = args.resultColumns;
    this.formula = args.formula;
}

ColumnFormula.prototype.init = function (grid) {
    this.grid = grid;
    this.grid.onCellChange.subscribe(this.handleChange.bind(this));
};

ColumnFormula.prototype.handleChange = function (args) {
    if (/* change happened for an operand column */) {
        var dataItem = this.grid.getData().getItems()[args.row];
        // apply a formula to the operand fields in the dataItem
        dataItem[this.resultColumn] = this.formula(this.operands, dataItem);
        this.grid.updateRow(args.row);
    }
};

ColumnFormula.Sum = function (operands, dataItem) {
    return dataItem[operands[0]] + dataItem[operands[1]];
};

// ...

var myColumnFormula = new ColumnFormula({
    operandColumns: ['OperandOne', 'OperandTwo'],
    resultColumn: 'ResultColumn',
    formula: ColumnFormula.Sum
});

grid.registerPlugin(myColumnFormula);