Ag-Grid - Excelデータをグリッドに貼り付ける - 行を追加する

Question

クリップボード/ ExcelデータをAG-Gridに貼り付けるとき、データを現在の行に追加するにはどうすればよいですか？

テーブルが現在1行しかなく、テーブルに10行を貼り付けようとしている場合、Ag-Gridは余分な9行を追加するのではなく、1行を上書きします。私はgridOptionがないか、これは不可能ですか？

Answer 1

私は同じ質問があります。もともと、ペーストイベントリスナーを使用して、使用可能なスペースとクリップボードのデータ長の差に基づいて、グリッドに複数の行を追加しました。しかし、グリッドは行を追加するだけで、ペーストは完了しません。

1）ペーストのイベントリスナーを追加：

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

2）クリップボードからデータを取得し、中に新しい行を作成する関数を作成し、あなたが必要なものを取得、次の手順に従い

Answer 2

グリッド：

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はAG-グリッドは、新しい行を貼り付けるために使用すると、私はちょうど「区切り」の変数を調整するために必要な機能です。 clipboardService.jsファイルからコピーしました。

// 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）最後に、グリッドに新しい空白行を追加し、以下の機能を使用するには：

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

基本的にこのコードが何をするか、グリッドの先頭に空白行を挿入しているのとAgをしましょうグリッドはデータをそれらの行に貼り付けます。コードを貼り付ける行は、グリッド内の最初の行でなければなりません。何か他のものが必要な場合は、調整が必要な場合があります。