Question

我喜欢带有干净整洁复选框的gijgo树状视图，它解决了显示层次结构信息的目的。检查下面的链接以获取文档。

https://gijgo.com/tree/demos/bootstrap-treeview-checkbox

因为对于前端开发而言，首选tockout.js，所以需要针对此特定需求开发一个挖空绑定。

想法是从后端填充层次结构数据，并将其绑定到自定义的剔除绑定。

用户选择/取消选择某些复选框，然后单击“保存”按钮。选定/未选定的数据再次发送回服务器进行保存。

下面的代码是jquery中控件的用法。

函数tree.getCheckedNodes()返回所选复选框的数组。

从敲除绑定中如何调用上述功能。

ko.bindingHandlers.tree = {
  init: function (element, valueAccessor, allBindingsAccessor) {

  },

  update: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor() || {};
    var value = ko.utils.unwrapObservable(valueAccessor());
    var tree = $(element).tree(value);

  }
}

Answer 1

在init方法中：

解开您的视图模型从valueAccessor
将初始数据转换为树小部件可以理解的格式
使用正确的设置$(element).tree({ /* ... */ })初始化小部件
附加事件监听器（.on("change", function() { }）来跟踪用户输入
- 在事件侦听器功能中，将数据从用户界面写回到视图模型（例如valueAccessor() (tree.getCheckedNodes())）
可选：如果敲除将其从DOM中删除，则添加custom disposal logic来清理小部件

在update方法中，如果您的视图模型的值更改，则会调用该方法

实施根据您的新设置更新小部件的逻辑。可能类似tree.check(ko.unwrap(valueAccessor()))。确保更新是“无声的”，如果它会触发change事件，那么您将陷入无限循环。

带有复选框的Gijgo Treeview的剔除绑定

1 个答案: