如何防止重新绑定对剑道网格数据项的更改

How to prevent rebind on kendo grid data item change?

本文关键字:网格 数据项 何防止 新绑定 绑定      更新时间:2023-09-26

我有一个剑道网格,当一个项目被选中时,我想修改底层数据项,所以我这样做…

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"我现在要编辑这个未绑定属性,不要乱动绑定"?

好吧,事实证明剑道有点奇怪,我仍然不明白为什么他们坚持让你调用他们所有的"api东西"来完成简单的任务,而更直接地做事情实际上效果更好。

在我的例子中,我完全删除了选择更改调用,并让kendo处理它,然后在我的选择按钮处理程序中,为了在网格之间移动数据,我直接更新了数据项上的属性,而不是调用"项。设置("prop", value)" I now have to do "项目。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;
        }

剑道似乎正在接听任何呼叫。设置(p, v)作为重新加载数据的触发器,这样就可以避免使用kendo包装器而直接进入项目属性,从而允许我直接控制过程。

将代码从选择更改事件处理程序移动到按钮单击处理程序也意味着我只关心数据在实际需要发送到服务器时是否正确,这是我只需要知道的。

我不喜欢这样,但它相当干净,即使底层数据不太正确,ui也能显示正确的图片。

我的另一个选择是创建一个自定义绑定,但考虑到绑定必须产生不同的结果,这取决于它绑定到主网格还是次网格,我怀疑这将是大量的js代码,这感觉像是两害相权取其轻。

我认为您可以将dataBinding事件绑定到"preventDefault",然后解除绑定并在您空闲时刷新

var g = $("#myGrid").data("kendoGrid");
g.bind("dataBinding", function(e) { e.preventDefault(); });

之后…

g.unbind("dataBinding");