自定义 ag-grid 以设置最大可选行数

Question

我正在尝试在基于 Angular 1.5 的项目中使用 ag-grid 自定义数据 table。自定义是允许用户select最大行数table，例如最大为2。

我使用在文档页面 here 中找到的 node.setSelected(false) 得到了以下代码，但我得到了错误：node.setSelected is not a function 当 selection 超过2 的最大值。

var gridOptions = {
    columnDefs: columnDefs,
    rowSelection: 'multiple',
    onRowSelected: onRowSelected
};


function onRowSelected(event) {
                var curSelectedNode = event.node;
                var selectionCounts = vm.gridOptions.api.getSelectedNodes().length;
                if (selectionCounts > 2) {
                    var oldestNode = vm.gridOptions.api.getSelectedNodes()[0]; // get the first node, to be popped out
                    oldestNode.setSelected(false); // causes the above 'not a function' error
                 }       
            }

有人知道 ag-grid 的 setSelected() API 有什么问题吗？或任何更好的方法来进行此自定义？

Answer 1

事实证明 setSelected(false) 方法在其当前 ag-grid API 中已过时，我发现我可以使用 deselectIndex() 方法取消选择最旧的节点：

if (selectionCounts > 2) {
    vm.gridOptions.api.deselectIndex(0, true); // This works!
}

希望这对以后的其他人有所帮助！

Answer 2

var columnDefs =[{
                       headerName: 'Name',
                       field: 'name',
                       width: 108,
                       minLength: 1,
                       maxLength: 20,
                       editable: true
}]

- 修改 .js 文件中的原型

TextCellEditor.prototype.init = function (params) {
        var eInput = this.getGui();
        var startValue;

        // Set min & max length
        if (params.column.colDef.maxLength)
            eInput.maxLength = params.column.colDef.maxLength;
        if (params.column.colDef.minLength)
            eInput.minLength = params.column.colDef.minLength;

        // cellStartedEdit is only false if we are doing fullRow editing
        if (params.cellStartedEdit) {
            this.focusAfterAttached = true;
            var keyPressBackspaceOrDelete = params.keyPress === constants_1.Constants.KEY_BACKSPACE
                || params.keyPress === constants_1.Constants.KEY_DELETE;
            if (keyPressBackspaceOrDelete) {
                startValue = '';
            }
            else if (params.charPress) {
                startValue = params.charPress;
            }
            else {
                startValue = params.value;
                if (params.keyPress !== constants_1.Constants.KEY_F2) {
                    this.highlightAllOnFocus = true;
                }
            }
        }
        else {
            this.focusAfterAttached = false;
            startValue = params.value;
        }
        if (utils_1.Utils.exists(startValue)) {
            eInput.value = startValue;
        }
        this.addDestroyableEventListener(eInput, 'keydown', function (event) {
            var isNavigationKey = event.keyCode === constants_1.Constants.KEY_LEFT || event.keyCode === constants_1.Constants.KEY_RIGHT;
            if (isNavigationKey) {
                event.stopPropagation();
            }
        });
    };

自定义 ag-grid 以设置最大可选行数

customizing ag-grid to set a max number of selectable rows

angularjs

datatable

row

selection

ag-grid