Personnalisation de l'ag-grid pour définir un nombre maximum de lignes sélectionnables

Question

J'essaie de personnaliser une table de données en utilisant ag-grid dans mon projet Angular 1.5. La personnalisation est que l'utilisateur est autorisé à sélectionner un nombre maximum de lignes dans la table, par exemple, le maximum est 2.

J'ai le code suivant en utilisant node.setSelected(false) que j'ai trouvé dans la page de documentation here, mais je a obtenu l'erreur: node.setSelected is not a function lorsque la sélection dépasse le maximum de 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 
       }  
      } 

quelqu'un sait-il ce qui pourrait être mal avec ag-grille pour son API setSelected()? ou une meilleure façon de faire cette personnalisation?

Answer 1

il se trouve que la méthode setSelected(false) est obsolète dans son actuelle API ag-grid, et je trouve que je peux utiliser la méthode deselectIndex() pour désélectionner le plus ancien noeud:

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

Espérons que cela aidera quelqu'un d'autre dans l'avenir!

Answer 2

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

- Modifier prototype dans le fichier .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(); 
      } 
     }); 
    };