通过控制剑术UI复制数据(Kendo UI copying data through control

2019-07-18 20:34发布

是否有可能采取2个独立的剑道UI网格和能够通过UI控件来传递数据来回(如向前和向后的箭头)?

该模式将是采取左侧,选择项目的主列表,并有右侧的细化列表。

Answer 1:

如果是可能的,这是不难做到,但你不得不自己,所以你需要做的是:

  1. 在KendoUI有些知识GridDataSource和事件,他们暴露。
  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. 用于从复制选定行grid1grid2
  2. 用于从复制选定行grid2grid1

按钮定义是:

<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();
    }
}

这个例子在这里



文章来源: Kendo UI copying data through controls