Question

我是使用fancytree的新手。我创建了一个演示，用于在网页中的表格中显示数据。现在我希望在用户更新后收回数据。

我正在使用本教程中提到的所谓的树方法。有一个例子有两行：

var tree = $("#tree").fancytree("getTree");

alert("We have " + tree.count() + " nodes.");

我以为我可以使用fancytree实例，即上例中的变量'tree'来访问所有节点，以便收集它们所采用的值。但是，当我将这两行示例放入我的代码中时，我遇到了错误。

为了说清楚，我粘贴了下面的完整代码。接近代码末尾，有两条注释标记为Place_1和Place_2。当我在这两个地方的每一个中放置两行示例时，我得到了错误，即“Uncaught TypeError：undefined is not a function”，或“Uncaught Error：无法在初始化之前调用fancytree上的方法;尝试调用方法分别是'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>

Answer 1

感谢大通的建议。

我认为在初始化完成后，应该在某处添加两行示例。

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

使用fancytree实例时出错

1 个答案: