Kendo UI Costom像Excel一样复制/粘贴网格和数据源更新



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

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

事实上,我找到了这两个问题的解决方案,并将与所有想制造奇怪东西的人分享: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表示来获得剑道小部件。例如,如果我选择一个带有嵌套的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>

我希望能在别人身上节省很多时间:)

最新更新