Kendo UI Costom 复制/粘贴网格，如 Excel 和数据源更新答案

【问题标题】：Kendo UI Costom Copy/ Paste Grid like Excel and data source updateKendo UI Costom 复制/粘贴网格，如 Excel 和数据源更新
【发布时间】：2018-04-27 10:54:46
【问题描述】：

我正在尝试添加 Kendo UI 网格复制/粘贴功能，这将允许在许多其他选定的单元格中相乘一些单元格或相乘选定的行或复制几列并将它们相乘在同一个网格中的某处 -几乎Excel功能。到目前为止我所做的是在这个JS Bin - http://jsbin.com/xokabumuka/1/edit?html,output - 在同一列中多次预填充一个复制的单元格值，但仅在前端。行也是一样的，当然也只是纯文本。

我实际上有两个问题： 第一个问题 - 目前由于某种原因，我不知道为什么，我在第二次迭代中丢失了“el2”rowIdx。例如，如果我从 productName 列值“Tea”复制并选择下面的所有单元格以预填充“Tea”，并且在第一次迭代后我的 rowIdx 为 -1 第二个问题 - 如果所选复制的单元格有一些，如何复制和嵌套小部件 - 例如，如果列 productName 包含下拉列表并且我想将其与他的数据源一起复制并粘贴等。

【问题讨论】：

标签： javascript jquery excel kendo-ui

【解决方案1】：

实际上，我找到了解决这两个问题的方法，并将与所有想要做出奇怪的事情的人分享：D

第一个问题解决方案 - 在两个 foreach 循环之间提取 grid.dataSource.data()[e.rowIdx].set(e.colName, e.value) - 由于某种原因，它会破坏当前行索引

$.each(copiedData, function(i, el) {
    var IdxNamesValues = []
    $.each(grid.select(), function(i2, el2) {
        var row = $(el2).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(el2);
        if (el.cellIndex === el2.cellIndex) {
            var colName = $('#grid').find('th').eq(el.cellIndex).text();
            var value = el.innerText;
            IdxNamesValues.push({rowIdx, colName, value});
            el2.innerText = el.innerText;
        }
    });

    $.each(IdxNamesValues, function(i, e) {
        grid.dataSource.data()[e.rowIdx].set(e.colName, e.value);
    })
})

第二个问题解决方案 - 我发现我可以通过它的 HTML 表示来获得 kendo 小部件。例如，如果我选择一个带有嵌套 kendoDropDownList 小部件的列，然后单击复制，我将得到以下 HTML。在那之后，我可以说copiedData.find('.k-widget input').data("kendoDropDownList") 将 kendoDropDownList 作为一个对象，其中包含所有选项、数据源等......

    <td class="k-state-selected" role="gridcell" aria-selected="true">
   <span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-busy="false" aria-activedescendant="f9fc2fa4-2c3d-4d9c-beef-7d924706fa72" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Jane Doe</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input data-role="dropdownlist" data-text-field="text" data-value-field="id" data-bind="value: name, source: items" style="display: none;"></span>
</td><td class="" role="gridcell">29</td><td class="" role="gridcell">testt</td>

我希望能为别人节省很多时间:)

【讨论】：