javascript - How to approach creating a SlickGrid with AJAX, calculated fields, sortable columns, paste etc?

Question

The project I'm working on intends to use a SlickGrid to display filterable and sortable data - up to a maximum of approximately 2 million rows. Other requirements are:

1. Some columns have editable data but others have reference data that shouldn't be edited.
2. Bulk copy and paste should be supported in editable fields.
3. Some field values are calculated by applying formulae to other values in the same row.

Since there could be a large number of rows, data should be loaded using AJAX. Have seen from other questions that some have advised modifying code from the examples (...if so, what is the best fit starting point?). Others have suggested using plugins (e.g. http://labs.nereo.com/slick.html provides copy and paste functionality or a fork such as Andrew Child's (maybe more risk as not officially supported?) There's a lot more to say but my question is really where best to start with all this - has anyone else had similar requirements and learnt by experience?

Grateful for any pointers, however small...

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

Answer 2

我知道这是一年多之后的事了，但我在我的项目中使用了@kavun 答案的计算公式部分。我发现的一件事是，如果您使用数据视图，则计算列不会因为 更新var dataItem = this.grid.getData().getItems()[args.row]，这会为您提供数据视图中的行而不是网格。我将该部分更改为下面的函数，它适用于数据视图

handleChange = function (e, args) {
    var dataItem = args.item;        
     // apply a formula to the operand fields in the dataItem
     dataItem[this.result] = this.formula(this.operands, dataItem);
     this.grid.invalidateRow(dataItem);
};