Ag-Grid - Einfügen von Excel-Daten in das Raster - Anfügen von Zeilen

Question

Beim Einfügen von Zwischenablage/Excel-Daten in AG-Grid, wie bekomme ich die Daten an die aktuellen Zeilen anhängen?

Wenn meine Tabelle momentan eine einzelne Zeile hat und ich versuche, 10 Zeilen in die Tabelle einzufügen, überschreibt Ag-Grid nur die einzelne Zeile, anstatt die zusätzlichen 9 Zeilen anzuhängen. Fehle ich eine GridOption oder ist das nicht möglich?

Answer 1

Ich habe die gleiche Frage. Ich habe ursprünglich einen Ereignislistener für das Einfügen verwendet, um dem Raster eine Anzahl von Zeilen hinzuzufügen, basierend auf dem Unterschied zwischen verfügbarem Speicherplatz und der Länge der Daten in der Zwischenablage. Aber jetzt wird das Raster nur die Zeilen hinzufügen und die Paste nicht vervollständigen.

Answer 2

zu bekommen, was Sie brauchen, gehen Sie folgendermaßen vor:

1) eine Paste Ereignis-Listener hinzufügen:

mounted() { 
    window.addEventListener('paste', this.insertNewRowsBeforePaste); 
} 

2) Erstellen Sie die Funktion, die die Daten aus der Zwischenablage abruft und schafft neue Linien in das Gitter:

insertNewRowsBeforePaste(event){ 
    var self = this; 

    // gets data from clipboard and converts it to an array (1 array element for each line) 
    var clipboardData = event.clipboardData || window.clipboardData; 
    var pastedData = clipboardData.getData('Text'); 
    var dataArray = self.dataToArray(pastedData); 

    // First row is already in the grid and dataToArray returns an empty row at the end of array (maybe you want to validate that it is actually empty) 
    for (var i = 1; i < dataArray.length-1; i++) { 
     self.addEmptyRow(i); 
    } 
} 

3) dataToArray ist eine Funktion, die AG-Grid neue Linien einzufügen verwendet und ich nur den "delimiter" Variable einzustellen benötigt. Ich habe es aus der Datei clipboardService.js kopiert.

// From http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data 
// This will parse a delimited string into an array of 
// arrays. The default delimiter is the comma, but this 
// can be overriden in the second argument. 
export var dataToArray = function(strData) { 
    var delimiter = self.gridOptions.api.gridOptionsWrapper.getClipboardDeliminator();; 
    // Create a regular expression to parse the CSV values. 
    var objPattern = new RegExp((
    // Delimiters. 
    "(\\" + delimiter + "|\\r?\\n|\\r|^)" + 
     // Quoted fields. 
     "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + 
     // Standard fields. 
     "([^\"\\" + delimiter + "\\r\\n]*))"), "gi"); 
    // Create an array to hold our data. Give the array 
    // a default empty first row. 
    var arrData = [[]]; 
    // Create an array to hold our individual pattern 
    // matching groups. 
    var arrMatches = null; 
    // Keep looping over the regular expression matches 
    // until we can no longer find a match. 
    while (arrMatches = objPattern.exec(strData)) { 
     // Get the delimiter that was found. 
     var strMatchedDelimiter = arrMatches[1]; 
     // Check to see if the given delimiter has a length 
     // (is not the start of string) and if it matches 
     // field delimiter. If id does not, then we know 
     // that this delimiter is a row delimiter. 
     if (strMatchedDelimiter.length && 
      strMatchedDelimiter !== delimiter) { 
      // Since we have reached a new row of data, 
      // add an empty row to our data array. 
      arrData.push([]); 
     } 
     var strMatchedValue = void 0; 
     // Now that we have our delimiter out of the way, 
     // let's check to see which kind of value we 
     // captured (quoted or unquoted). 
     if (arrMatches[2]) { 
      // We found a quoted value. When we capture 
      // this value, unescape any double quotes. 
      strMatchedValue = arrMatches[2].replace(new RegExp("\"\"", "g"), "\""); 
     } 
     else { 
      // We found a non-quoted value. 
      strMatchedValue = arrMatches[3]; 
     } 
     // Now that we have our value string, let's add 
     // it to the data array. 
     arrData[arrData.length - 1].push(strMatchedValue); 
    } 
    // Return the parsed data. 
    return arrData; 
} 

4) Schließlich neue Leerzeilen im Raster hinzuzufügen, verwenden Sie die Funktion unter:

addEmptyRow(rowIndex) { 
    var newItem = {}; 
    this.gridOptions.api.updateRowData({add: [newItem], addIndex: rowIndex}); 
} 

Im Grunde, was dieser Code tut, ist leere Zeilen am Anfang des Rasters einfügen und ag lassen -Grid fügt die Daten in diese Zeilen ein. Damit es funktioniert, muss die Zeile, in die der Code eingefügt wird, die erste Zeile im Raster sein. Möglicherweise müssen Sie einige Anpassungen vornehmen, wenn Sie etwas anderes benötigen.