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

时间:2017-11-14 13:07:52

标签: javascript jquery excel kendo-ui

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

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

1 个答案:

答案 0 :(得分:0)

实际上我找到了解决这两个问题的方法,并且会为所有想要做出奇怪事情的人分享它们: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作为一个对象,包含所有选项,dataSource等...

    <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>

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