Ag-Grid - 将 Excel 数据粘贴到网格中 - 附加行答案

【问题标题】：Ag-Grid - Pasting Excel Data into Grid - Appending RowsAg-Grid - 将 Excel 数据粘贴到网格中 - 附加行
【发布时间】：2017-12-25 05:53:45
【问题描述】：

将剪贴板/Excel 数据粘贴到 AG-Grid 时，如何让数据附加到当前行？

如果我的表当前只有一行并且我尝试将 10 行粘贴到表中，Ag-Grid 只会覆盖单行而不是附加额外的 9 行。我错过了 gridOption 还是不可能？

【问题讨论】：

标签： ag-grid

【解决方案1】：

要获得您需要的东西，请按以下步骤操作：

1) 添加粘贴事件监听器：

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

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-Grid 用来粘贴新行的函数，我只需要调整“分隔符”变量。我从 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-Grid 将数据粘贴到这些行中。要使其正常工作，粘贴代码的行必须是网格中的第一行。它使用来自 ag-grid (https://www.ag-grid.com/javascript-grid-data-update/) 的 updateRowData。

如果您需要其他东西，您可能需要进行一些调整。

【讨论】：

请添加 ag-grid 文档链接以供参考。

【解决方案2】：

我也有同样的问题。我最初使用粘贴事件侦听器根据可用空间和剪贴板数据长度之间的差异向网格添加许多行。但是现在网格只会添加行而不是完成粘贴。

【讨论】：