当我使用花哨的树实例时出错

Errors when I use a fancytree instance

本文关键字：实例 出错      更新时间：2023-09-26

我是使用花式树的新手。我创建了一个演示来在网页内的表格中显示数据。现在我希望在用户更新数据后收集数据。

我使用的是教程中提到的所谓的树方法。有一个示例，下面有两行：

var tree = $("#tree").fancytree("getTree");
alert("We have " + tree.count() + " nodes.");

我想我可以使用花哨的树实例，上面示例中的变量"树"来访问所有节点，以便收集它们采用的值。但是当我把这个两行示例放入我的代码中时，我遇到了错误。

为了清楚起见，我在下面粘贴了完整的代码。在代码末尾附近，有两个注释由 Place_1 和 Place_2 标记。当我把两行示例放在这两个地方时，我得到了错误，它们是"未捕获的类型错误：未定义不是函数"，或"未捕获的错误：无法在初始化之前调用花式树上的方法;尝试分别调用方法'getTree'"。

我想我一定错过了什么。任何想法都会有所帮助。谢谢！

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <link type="text/css" rel="stylesheet" href="addtionals/jquery-ui.css" />
      <script src="addtionals/jquery.min.js" type="text/javascript"></script>
      <script src="addtionals/jquery-ui.min.js" type="text/javascript"></script>
      <link href="fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
      <script src="fancytree/src/jquery.fancytree.js" type="text/javascript"></script>
      <script src="fancytree/src/jquery.fancytree.edit.js" type="text/javascript"></script>
      <script src="fancytree/src/jquery.fancytree.table.js" type="text/javascript"></script>
        <script type="text/javascript">
            var Rigid_Package_SOURCE = [
                {title: "Role-Based Statements", key: "1", folder: true, expanded: true, children: [
                  {title: "Text1", key: "2"},
                  {title: "Text2", key: "3"}
                 ]}
              ];
            $(function(){
              $("#RB_Statements_tree").fancytree({
                source: Rigid_Package_SOURCE,
                extensions: ["edit", "table"],
                edit: {
                    triggerCancel: ["esc"],
                  triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
                  beforeEdit: function(event, data){
                    if (data.node.isFolder() ) {
                        var title = data.node.title;
                        data.node.editEnd();
                        data.node.setTitle(title);
                        return false;
                    }        
                  },
                  beforeClose: function(event, data){
                    if (data.node.isFolder()) {
                    }else{
                      if (data.input.val() == ""){
                            data.node.setTitle("");
                        }
                    }
                  }
                },
                table: {
                  indentation: 20,
                  nodeColumnIdx: 1
                },
                renderColumns: function(event, data) {
                  var node = data.node,
                  $tdList = $(node.tr).find(">td"),
                  $select = $("<select />");
                  if( node.isFolder() ) {
                  }else{
                    $("<option > Tutor </option>").appendTo($select);
                      $("<option selected > Student </option>").appendTo($select);
                      $("<option > Teacher </option>").appendTo($select);
                      $tdList.eq(0).html($select);
                  }
                }
              });
            });
        </script>
    </head>
    <body>
        <script type="text/javascript">
        //Place_1: Uncaught TypeError: undefined is not a function 
        //var tree = $("#RB_Statements_tree").fancytree("getTree");
        //alert("We have " + tree.count() + " nodes.");
        </script>
        <!--The title of this page-->
          <h4> Vicarious Conversation</h4>
            <!-- Table: Role-Based Statements -->
            <table id="RB_Statements_tree">
            <colgroup>
            <col width="100px">
            <col width="300px">
            </colgroup>
            <thead>
              <tr> <th></th> <th></th>
            </thead>
            <tbody>
            </tbody>
          </table>
          <br>
        <script type="text/javascript">
        //Place_2: Uncaught Error: cannot call methods on fancytree prior to initialization; attempted to call method 'getTree' 
        //var tree = $("#RB_Statements_tree").fancytree("getTree");
        //alert("We have " + tree.count() + " nodes.");
        </script>
    </body>
    </html>

感谢您对大通的建议。

我认为应该在初始化完成后将两行示例添加到某个地方。

例如，我将代码添加到按钮的主体中，效果很好。以下是关于在 fancytree 中实现按钮的示例： http://wwwendt.de/tech/fancytree/demo/#sample-source.html

相关文章：