1

我有这个树视图，它可以有可变数量的孩子（一些节点最多可以有 3 代孩子，有些可能只有一个等）

我要做的是在加载树视图时展开某个节点。我有 2 个问题：1）我找不到事件/回调，以便我知道树视图何时准备好 2）扩展功能并不总是有效（我会解释）

这是我的树视图：

function InitializeTreeview() {

var Children_Merchants = {
    transport: {
        read: {
            url: function (options) {
                return kendo.format(websiteRootUrl + '/Merchants/Merchants/?hasParents={0}',   hasParent);
            }
        }
    },
    schema: {
        model: {
             model: {
            id: "ID",
            hasChildren: true,
            children: Children_Merchants
        }
        }
    }
};

var Brandowners = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: kendo.format(websiteRootUrl + '/Merchants/GetBrandowners?databaseID={0}',       selectedDatabaseID)
      }
    },
    //change: ExpandNode, - if I call expand node like this, it works.
    schema: {
        model: {
            id: "ID",
            hasChildren: true,
            children: Children_Merchants
        }
    }
});


$('#treeview').kendoTreeView({
    dataSource: Brandowners,
    animation: {
        collapse: {
            duration: 200,
            effects: "fadeOut"
        },
        expand: {
            duration: 200,
            effects: "fadeIn"
        }

    },
    dataTextField: "Name",
    complete: function () {  alert('ok'); },
    //dataBound    : ExpandNode,
    select: OnSelect,
    expand: CheckIfHasParent
}).data('kendoTreeView');
}

function ExpandNode() {
    var treeview;
    treeview = $("#treeview").data("kendoTreeView");
    var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter
    treeview.expand(nodeToExpand);
}

数据绑定工作正常，我的控制器被调用，一切都很好。因此，我尝试将 ExpandNode 函数连接到单击按钮。该函数被调用但没有任何反应。但是，如果我将它连接到父数据源的更改事件，它就可以工作。另一个有趣的事情是选择有效，所以如果我用 treeview.select(...) 替换 treeview.expand(...)，它在点击时有效。

所以我的问题是：

1）我应该为loadEnd（或类似的东西）使用什么事件 - 所以我不必将函数绑定到按钮点击（它仍然可以，但我更喜欢加载结束） - PS我尝试了所有我找到的剑道论坛，如：change、requestEnd、success、dataBound，它们不起作用。我尝试为有问题的节点发送属性“扩展”设置为 TRUE 的 JSON，但这只会修改箭头以显示它已打开，但它不会调用控制器并加载子节点。

2) 你知道为什么 ExpandNode 只在绑定到 change 事件时才有效吗？- 对我来说最重要的问题。

3）如果您有建议，或者我在树视图的初始化中做错了什么，请告诉我。

4

4 回答 4

3

我已经用一些免费的解释复制了你的代码，你的问题的答案是：

  1. 我应该为 loadEnd => dataBound使用什么事件
  2. 你知道为什么 ExpandNode 只在绑定到 change 事件时才有效吗？=>不，它可以在不将其绑定到change事件的情况下工作。如果没有，那么您的代码中还有其他内容。
  3. 建议=>缺少一些关于您的代码的信息，这些信息可能与我已实现的内容有所不同。
  4. 是什么CheckIfHasParent？=>我已经将它实现为一个实际上什么都不做的函数。
  5. 是什么hasParent？=>我忽略了它。

我写的代码：

$(document).ready(function () {
        function InitializeTreeview() {
            var Children_Merchants = {
                transport: {
                    read: function (op) {
                        var id = op.data.ID;
                        var data = [];
                        for (var i = 0; i < 10; i++) {
                            var aux = id * 100 + i;
                            data.push({ Name: "Name-" + aux, ID: aux});
                        }
                        op.success(data);
                    }
                },
                schema   : {
                    model: {
                        model: {
                            id         : "ID",
                            hasChildren: true,
                            children   : Children_Merchants
                        }
                    }
                }
            };
    
            var Brandowners = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: function (op) {
                        op.success([
                            {"Name": "Adam", "ID": 1},
                            {"Name": "Benjamin", "ID": 2},
                            {"Name": "Caleb", "ID": 3},
                            {"Name": "Daniel", "ID": 4},
                            {"Name": "Ephraim", "ID": 5},
                            {"Name": "Frank", "ID": 6},
                            {"Name": "Gideon", "ID": 7}
                        ])
                    }
                },
                //change: ExpandNode, - if I call expand node like this, it works.
                schema   : {
                    model: {
                        id         : "ID",
                        hasChildren: true,
                        children   : Children_Merchants
                    }
                }
            });
    
            $('#treeview').kendoTreeView({
                dataSource   : Brandowners,
                animation    : {
                    collapse: {
                        duration: 200,
                        effects : "fadeOut"
                    },
                    expand  : {
                        duration: 200,
                        effects : "fadeIn"
                    }
    
                },
                dataTextField: "Name",
                dataBound    : ExpandNode,
                expand       : CheckIfHasParent
            }).data('kendoTreeView');
        }
    
        function ExpandNode() {
            var treeview;
            treeview = $("#treeview").data("kendoTreeView");
            var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter
            treeview.expand(nodeToExpand);
        }
    
        function CheckIfHasParent(e) {
        }
    
        InitializeTreeview();
    
 });

你可以在这里玩它：http: //jsfiddle.net/OnaBai/dSt2h/

于 2013-07-08T22:27:06.600 回答
1 
$("#treeview").kendoTreeView({
    animation: {
        expand: true
    },

    dataSource: dataSource,
    dataBound: function (e) {                   
        var tv = $("#treeview").data("kendoTreeView");
        if (tv != null) {
            tv.expand(".k-item");
        }
    },

    dataTextField: "test",
    dataValueField: "id"                
});
于 2014-08-29T09:32:47.927 回答
1

对于任何可能感兴趣的人：

   function ExpandNode() {
    
   var treeview;
   var node1;

   treeview = $("#treeview").data("kendoTreeView");
   var node2;
   var myURL = kendo.format(websiteRootUrl + '/Merchants/GetPathForSelectedNode?databaseID={0}&merchantID={1}&brandownerID={2}', selectedDatabaseID,MerID,BowID);
       
   node1 = treeview.dataSource.get(BowID);
   node = treeview.findByUid(node1.uid);
   var uid = node1.uid;
   node.find('span:first-child').trigger('click'); //expand 1st level

   $.ajax( {
                            url: myURL,
                            dataType: "json",
                            contentType: 'application/json; charset=utf-8',
                            success: function(result)
                                {
                                   
                                   var length = result.length;
                                 
                                   var lastVal = 1;
                                   for (var i = 1; i < length-1; i++) {
                                        $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function
                                        () {
                                               i = lastVal; // have to reinitialize i because waitUntilExist's callback will find the i incermented, over the needed value
                                               lastVal++;
                                               node2 = node1.children.get(result[i]);
                                               node = treeview.findByUid(node2.uid);
                                               uid = node2.uid;
                                               node1 = node2;
                                               if(lastVal <= length-1)
                                                    node.find('span:first-child').trigger('click'); // keep expanding
                                               else
                                               {
                                                    treeview.select(node); // just select last node
                                                    currentSelectedNode = node;
                                                }
                                            
                                        });
                                   }
                                   if(length == 2) //select 1st child
                                   {
                                        $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function
                                        () {
                                               node2 = node1.children.get(result[i]);
                                               node = treeview.findByUid(node2.uid);
                                               uid = node2.uid;
                                               node1 = node2;
                                               treeview.select(node); // just select last node
                                               currentSelectedNode = node;
                                        });
                                   }
                                }
                          });

}

这是我的方法。for 循环从 1 开始，因为我的数组中的第一个元素是第一个节点 ID - 我已经展开了。.waitUntilExists 是 Ryan Lester 的方法（我在上面的评论中放了一个链接）。非常感谢我的同事、OnaBai，当然还有 Ryan Lester。我希望这可以帮助别人。干杯

于 2013-07-12T08:19:57.387 回答
0

ypu 可以通过以下代码轻松找到树视图已准备好扩展，这些代码正在扩展所有树视图节点，您也可以通过检查特定 id 或文本 hopw 找到它，以下示例将帮助您

前任：

$("#treeview").kendoTreeView({
                animation: {
                    expand: true
                },

                dataSource: dataSource,
                dataBound: function (e) {                   
                    var tv = $("#treeview").data("kendoTreeView");
                    if (tv != null) {
                        tv.expand(".k-item");
                    }
                },

                dataTextField: "test",
                dataValueField: "id"                
            });
于 2014-04-21T12:58:03.833 回答