Question

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

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

Answer 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用来粘贴新行的函数，我只需要调整＆＃34;分隔符＆＃34;变量。我从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将数据粘贴到这些行中。要使其工作，粘贴代码的行必须是网格中的第一行。如果您需要其他东西，可能需要进行一些调整。

Answer 2

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

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

2 个答案: