是否有可能采取2个独立的剑道UI网格和能够通过UI控件来传递数据来回(如向前和向后的箭头)?
该模式将是采取左侧,选择项目的主列表,并有右侧的细化列表。
是否有可能采取2个独立的剑道UI网格和能够通过UI控件来传递数据来回(如向前和向后的箭头)?
该模式将是采取左侧,选择项目的主列表,并有右侧的细化列表。
如果是可能的,这是不难做到,但你不得不自己,所以你需要做的是:
Grid
和DataSource
和事件,他们暴露。 让有以下网格定义:
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");
我们定义两个按钮:
grid1
到grid2
grid2
到grid1
按钮定义是:
<div><a href="#" id="copySelectedToGrid2" class="k-button">></a></div>
<div><a href="#" id="copySelectedToGrid1" class="k-button"><</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();
}
}
这个例子在这里