kendo-ui - Kendo UI 通过控件复制数据

Question

是否可以采用 2 个单独的 Kendo UI 网格并能够通过 UI 控件来回传递数据（如前进和后退箭头）？

该模式将采用左侧的主列表，选择项目并在右侧有一个精炼的列表。

Answer 1

如果可能并且不难做到，但你必须自己做，所以你需要：

1. 关于 KendoUIGrid及其DataSource公开的事件的一些知识。
2. 一些关于 JavaScript + jQuery 的知识，可以帮助您进行验证并避免错误。

让我们有以下网格定义：

var grid1 = $("#grid1").kendoGrid({
    dataSource:  ds1,
    selectable:  "multiple",
    navigatable: true,
    pageable:    false,
    columns:     [
        { field: "name", title: "Name" },
        { field: "lastName", title: "Last Name" }
    ]
}).data("kendoGrid");

var grid2 = $("#grid2").kendoGrid({
    dataSource:  ds2,
    selectable:  "multiple",
    navigatable: true,
    pageable:    false,
    columns:     [
        { field: "name", title: "Name" },
        { field: "lastName", title: "Last Name" }
    ]
}).data("kendoGrid");

我们定义了两个按钮：

1. 用于将选定的行从复制grid1到grid2
2. 用于将选定的行从复制grid2到grid1

按钮定义为：

<div><a href="#" id="copySelectedToGrid2" class="k-button">&gt;</a></div>
<div><a href="#" id="copySelectedToGrid1" class="k-button">&lt;</a></div>

以及用于管理它的 JavaScript：

$("#copySelectedToGrid2").on("click", function (idx, elem) {
    moveTo(grid1, grid2);
});

$("#copySelectedToGrid1").on("click", function (idx, elem) {
    moveTo(grid2, grid1);
});

最后moveTo会是这样的：

function moveTo(from, to) {
    var selected = from.select();
    if (selected.length > 0) {
        var items = [];
        $.each(selected, function (idx, elem) {
            items.push(from.dataItem(elem));
        });
        var fromDS = from.dataSource;
        var toDS = to.dataSource;
        $.each(items, function (idx, elem) {
            toDS.add({ name: elem.name, lastName: elem.lastName });
            fromDS.remove(elem);
        });
        toDS.sync();
        fromDS.sync();
    }
}

这里的例子