Javascript 如何防止kendo网格数据项更改上的重新绑定?
我有一个剑道网格,当一个项目被选中时,我想修改基础数据项,所以我正在这样做Javascript 如何防止kendo网格数据项更改上的重新绑定?,javascript,data-binding,kendo-ui,kendo-grid,Javascript,Data Binding,Kendo Ui,Kendo Grid,我有一个剑道网格,当一个项目被选中时,我想修改基础数据项,所以我正在这样做 selectionChange: function(e) { var component = $(this.table).closest('.component'); var grid = this; var val = !component.hasClass("secondary"); var selection = grid.dataItems
selectionChange: function(e)
{
var component = $(this.table).closest('.component');
var grid = this;
var val = !component.hasClass("secondary");
var selection = grid.dataItems(grid.select());
selection.forEach(function () {
this.set("SaleSelected", val);
});
}
我也有两个按钮,让我可以推动两个网格之间的项目,这样做
select: function (e) {
e.preventDefault();
var sender = this;
// get kendo data source for the primary grid
var source = $(sender).closest(".component")
.find(".component.primary")
.find(".details > [data-role=grid]")
.data("kendoGrid")
.dataSource;
// sync and reload the primary grid
source.sync()
.done(function () {
source.read();
my.Invoice.reloadGridData($(sender).closest(".component").find(".component.secondary").find(".details > [data-role=grid]"));
});
return false;
},
deselect: function (e) {
e.preventDefault();
var sender = this;
debugger;
// get kendo data source for the secondary grid
var source = $(sender).closest(".component")
.find(".component.secondary")
.find(".details > [data-role=grid]")
.data("kendoGrid")
.dataSource;
// sync and reload the primary grid
source.sync()
.done(function () {
source.read();
my.Invoice.reloadGridData($(sender).closest(".component").find(".component.primary").find(".details > [data-role=grid]"));
});
return false;
}
基本上,grid1中的“选定项”可以在服务器上标记为这样,然后重新加载网格以移动这些项
我觉得一切都很好,但显然剑道还有其他想法
编辑数据项会导致其所属网格重新绑定,从而丢失选择状态,从而导致用户出现一些令人困惑的行为
有没有办法告诉kendo“我现在就要编辑这个未绑定的属性,不要搞乱绑定”我想你可以将数据绑定事件绑定到一个“preventDefault”,然后解除绑定并在空闲时刷新
var g = $("#myGrid").data("kendoGrid");
g.bind("dataBinding", function(e) { e.preventDefault(); });
后来
g.unbind("dataBinding");
好吧,事实证明剑道有点古怪,我仍然不知道为什么他们坚持要你调用他们所有的“api材料”来完成简单的任务,而更直接地做事情实际上效果更好 在我的例子中,我完全删除了选择更改调用,并让kendo处理它,然后在我的选择按钮处理程序中,在网格之间移动数据,我直接更新了数据项上的属性,而不是调用 “item.set(“prop”,value)”我现在必须做“item.prop=value” 最终的结果是
select: function (e) {
e.preventDefault();
var sender = this;
// get some useful bits
var component = $(sender).closest(".component");
var primaryGrid = component.find(".component.primary").find(".details > [data-role=grid]").data("kendoGrid");
// get the new selection, and mark the items with val
var selection = $(primaryGrid.tbody).find('tr.k-state-selected');
selection.each(function (i, row) {
primaryGrid.dataItem(row).SaleSelected = true;
primaryGrid.dataItem(row).dirty = true;
});
// sync and reload the primary grid
primaryGrid.dataSource.sync()
.done(function () {
primaryGrid.dataSource.read();
component.find(".component.secondary")
.find(".details > [data-role=grid]")
.data("kendoGrid")
.dataSource
.read();
});
return false;
},
deselect: function (e) {
e.preventDefault();
var sender = this;
// get some useful bits
var component = $(sender).closest(".component");
var secondaryGrid = component.find(".component.secondary").find(".details > [data-role=grid]").data("kendoGrid");
// get the new selection, and mark the items with val
var selection = $(secondaryGrid.tbody).find('tr.k-state-selected');
selection.each(function (i, row) {
secondaryGrid.dataItem(row).SaleSelected = false;
secondaryGrid.dataItem(row).dirty = true;
});
// sync and reload the primary grid
secondaryGrid.dataSource.sync()
.done(function () {
secondaryGrid.dataSource.read();
component.find(".component.primary")
.find(".details > [data-role=grid]")
.data("kendoGrid")
.dataSource
.read();
});
return false;
}
剑道似乎接受了对item.set(p,v)的任何调用,将其作为重新加载数据的触发器,因此避免剑道包装器并直接转到item属性允许我直接控制流程
将代码从selection change事件处理程序移动到button click处理程序也意味着我只关心数据在实际需要发送到服务器时是否正确,这是我需要注意的
我不喜欢这样,但它相当干净,ui显示了正确的画面,即使底层数据不太正确
我的另一个选择是创建一个自定义绑定,但考虑到绑定会产生不同的结果,这取决于它绑定到主网格还是次网格,我怀疑会有很多js代码,这感觉像是两害相权取其轻。唯一的问题是我不希望绑定跟随选择更改,因此我无法删除绑定,进行更改,然后重新添加。我不确定如何将其作为一个解决方案来实现。为什么他们坚持让你调用他们所有的“api材料”来完成简单的任务,而实际上更直接的工作效果更好?你说得对。这是大多数框架的肮脏的小秘密,它们都是关于一些认为自己最了解的开发人员,以及关于赚钱。其中许多方法实际上并没有为您节省任何时间。在这里的示例中比较这两种不同的方法很有趣。一个调用set,另一个直接调用set