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

我正在从事的项目打算使用SlickGrid来显示可过滤和可排序的数据，最多可显示约200万行。其他要求包括：

某些列具有可编辑数据，但其他列具有可编辑的参考数据 不应该被编辑

可编辑字段中应支持批量复制和粘贴

某些字段值通过将公式应用于同一行中的其他值来计算

因为可能有大量的行，所以应该使用AJAX加载数据。从其他问题中可以看出，一些人建议从修改代码（…如果是，那么最适合的起点是什么？）。其他人建议使用插件（例如，提供复制和粘贴功能或分叉，例如（如果没有官方支持，可能会有更大的风险？）还有很多话要说，但我的问题是，从哪里开始这一切才是最好的——是否有其他人有类似的要求并从经验中学习

---

感谢您的指点，无论多么小……

我对您的要点的看法：

可编辑/不可编辑列 这将与在列定义中定义或不定义

编辑器一样简单

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

编辑器是公平的，创建复合编辑器的能力提供了很大的灵活性

如果需要应用更多业务逻辑以使列中的单个单元格不可编辑或可编辑，则有两个选项：


订阅
grid.onBeforeCellEdit
事件，以便进行编辑

扩展以提供项的自定义元数据，在其中可以禁用单元格的编辑器。一个简单的示例：

function getItemMetadata(i) {
    var item = rows[i];

    return {
        columns: {
            // disable the editor
            'InitiallyEditableColumn': { editor: null }
        }
    };
}



批量复制粘贴
如何使用
Slick.CellCopyManager
在网格内处理复制粘贴

可以通过从外部电子表格复制粘贴

列公式
可以创建一个
Slick.Plugin
，将定义的公式从两个操作数列计算到一个结果列中。处理
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);

我知道这是一年多以后的事了，但我在我的项目中使用了@kavun answer的computed formula部分。我发现，如果使用dataview，计算列将不会更新，因为
var dataItem=this.grid.getData（）.getItems（）[args.row]
，它为您提供了dataview中的行而不是网格。我将该部分更改为下面的函数，它适用于dataview

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