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

Posted 2023-02-22

【中文标题】如何使用 AJAX、计算字段、可排序列、粘贴等创建 SlickGrid？

【英文标题】：How to approach creating a SlickGrid with AJAX, calculated fields, sortable columns, paste etc?

【发布时间】：2013-11-22 13:08:15

【问题描述】：

我正在进行的项目打算使用 SlickGrid 来显示可过滤和可排序的数据 - 最多大约 200 万行。其他要求是：

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

由于可能存在大量行，因此应使用 AJAX 加载数据。从其他问题中看到，有些人建议从examples 修改代码（...如果是这样，什么是最合适的起点？）。其他人建议使用插件（例如http://labs.nereo.com/slick.html 提供复制和粘贴功能或诸如Andrew Child's 之类的分叉（可能没有官方支持的风险更大？）还有很多要说的，但我的问题确实是最好从哪里开始这个 - 有没有其他人有类似的要求并通过经验学习？

感谢任何指针，无论多么小......

【参考方案1】：

我对您的要点的看法：

可编辑/不可编辑的列

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

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

编辑器相当easy to create，创建复合编辑器的能力提供了极大的灵活性。

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

订阅grid.onBeforeCellEdit事件到cancel a cell from switching to edit mode under a certain condition。

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

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

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

批量复制粘贴

There is an example 了解如何使用Slick.CellCopyManager 处理网格本身内的复制粘贴。

可以通过plugin that you mentioned从外部电子表格复制粘贴。

列公式

可以创建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);

【参考方案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);
;