KendoUI 网格 - 动态添加行 - 绑定虚拟机



我使用的是剑道版本2017.3.913,我是客户端。

我将要描述的所有作品...除了最后一点(典型!

我的网格设置为调用我的 API 来返回数据。 当数据返回时,我向每条记录添加一个附加属性"IsSelected",因为我在每行上都有一个复选框。然后,我将数据绑定到网格并应用我的过滤器(网格上方还有四个复选框以允许过滤数据)。

一旦我的网格被绑定,我就会连接一个绑定事件,该事件根据数据(禁用等)设置每行复选框的状态。 这也在数据行之间增加了许多行(绿色) - 就像一个标题来指示下面的行都彼此相关(所以想象一个绿色行后跟 5 个白行,然后是一个新的绿色行,说 3 个白行等)。 我以这种方式添加的这些行上也有一个复选框 - 当我单击此复选框时,我希望所有相关(白色)行都处于选中状态(<- 我还没有那么远)。

目前为止,一切都好。

当我过滤网格时,网格会刷新,所以我不得不想出一种方法来跟踪选中的复选框并在网格刷新后重新设置其状态。 以前(即:在不同的页面上)我通过使用数组来存储已选中的复选框来管理它,然后在绑定事件中,我将运行数组并重新选中相应的复选框 - 结果证明在几个地方有很多代码。 所以这次我想我会尝试使用可观察数组 (VM)。

我让一切都工作到一定程度 - 数据行(白色)在网格刷新之间保持其复选框状态,这很棒 - 不需要大量的 DOM 工作。 然而。。。

添加标题行(绿色)的代码如下所示;

chkbx.setAttribute("data-bind", "events: { change: CheckBoxClick }");

当然,该方法中的代码比这多得多,但这是重要的一点(我相信)。 这将正确呈现为;

<td>
<input type="checkbox" data-id="196" data-bind="events: { change: CheckBoxClick }">
</td>

我的 VM 中有一个方法;

CheckBoxClick: function() {
alert("Hello");
}

但是它从未被调用过,所以我认为由于添加了与 VM 相关的新内容,VM 需要反弹,但该 VM 不知道,所以我像这样在网格的绑定事件上重新绑定 VM;

kendo.bind($("#openTab"), openVM);

不幸的是,该行导致在网格绑定事件中完成的所有工作都被销毁,即:没有标题行(绿色)和(尽管我还没有提到)背景行颜色(在数据行上)被清除。 基本上我只剩下一个简单的网格。 动态添加的行(绿色)不存在,无法单击其复选框以点击 VM 中的方法。

我不知道为什么绑定 VM 应该以这种方式改变网格。

有人有什么想法吗?

当您在已绑定的 DOM 元素中动态添加内容时,该新内容不会像您观察到的那样被绑定。您需要做的是仅绑定已添加的新内容。在包含整个网格的元素上再次调用 kendo bind 是矫枉过正的,并且会导致您所描述的不良影响。一般来说,如果你想重新绑定一个 DOM 元素,你应该先在它上使用 kendo.unbind 但我跑题了。

无论如何,我希望您需要做的就是:

chkbx.setAttribute("data-bind", "events: { change: CheckBoxClick }");
kendo.unbind(chkbx); // Might need to do this, not sure
kendo.bind(chkbx, openVM);

最新更新