如何在kendo树视图上展开所选子节点的父节点

时间:2014-10-10 00:28:38

标签: kendo-ui kendo-asp.net-mvc kendo-treeview

嗨有剑道爱好者..我在剑道树视图上有一点问题,我设法扩展树视图的选定子节点,如果它是父母,但我可以扩展它的祖父母,这里是我的小代码:

data.forEach(function (entry) {
                        var treeView = $("#sysfunc_ktreeview").data('kendoTreeView');
                        var dataSource = treeView.dataSource;
                        var dataItem = dataSource.get(entry);
                        var node = treeView.findByUid(dataItem.uid);
                        var checkbox = $("input[type='checkbox']", node)[0];
                        checkbox.click();
                    });

在这种情况下,我从数据库中获取数组。但是在这里,如果检查了子节点但是没有在数组中的id(父节点),我就无法展开父节点。任何伟大的帮助将不胜感激。这段小代码来自先生OnaBai ..谢谢先生

3 个答案:

答案 0 :(得分:3)

如果要点击iddata所有项目的所有祖先,请添加以下代码行:

var ancestors = $(node).parents("li[role='treeitem']");
$(">div>span>input", ancestors).click();

这将为每个clicks input选择当前节点an的所有祖先。

所以你的代码应该是这样的:

  data.forEach(function (entry) {
      var treeView = $("#treeview").data('kendoTreeView');
      var dataSource = treeView.dataSource;
      var dataItem = dataSource.get(entry);
      var node = treeView.findByUid(dataItem.uid);
      var checkbox = $("input[type='checkbox']", node)[0];
      checkbox.click();
      var ancestors = $(node).parents("li[role='treeitem']");
      $(">div>span>input", ancestors).click();
  });

您可以在此处看到它:http://dojo.telerik.com/@OnaBai/IRom

答案 1 :(得分:1)

我想出的最佳解决方案是:

突出显示的代码:

dataBound: function(e){
    // expands tree to the selected node
    var root = e.node ? $(e.node) : this.element;
    // expands only selected checkboxes and parents 
    this.expand(root.find(".k-item input[type=checkbox]:checked").parents());
},

完整代码:

$(".locationTree").kendoTreeView({
    loadOnDemand: false,
    checkboxes: true,
    select: function(e){
        e.preventDefault();
    },
    dataSource: {
        type: "json",
        data: processTable(flatData, "id", "parent", 0)
    },
    dataBound: function(e){
        // expands tree to the selected node
        var root = e.node ? $(e.node) : this.element;
        //this.expand(root.find(".k-item")); // expands all
        // expands only selected checkboxes and parents 
        this.expand(root.find(".k-item input[type=checkbox]:checked").parents());
    },
});

答案 2 :(得分:0)

找到了更好的方法先生@OnaBai

success: function (data) {
        $.each(data, function (index, entry) {

                        var dataSource = treeView.dataSource;
                        var dataItem = dataSource.get(entry);

                        if (!dataItem.hasChildren)
                        {
                            dataItem.set("checked", true);
                        }
                        var node = treeView.findByUid(dataItem.uid);

                        parents.push(treeView.dataItem(treeView.parent(node)).id);

                        if (index + 1 == data.length) {
                            setTimeout(function () {
                                self.expandParents(parents, treeView);
                            }, 100);
                        }                         
                    });
                    setTimeout(function () {
                        self.filterChange(treeView, data);
                    }, 100);
                }