使用fancytree实例时出现错误
使用fancytree实例时出现错误
提问于 2014-12-03 09:17:49
我是一个使用fancytree的新手。我已经创建了一个演示，用于在网页中的表格中显示数据。现在，我希望在用户更新数据后将其收集回来。
我使用的是本教程中提到的所谓的树方法。下面是一个包含两行代码的示例：
var tree = $("#tree").fancytree("getTree");
alert("We have " + tree.count() + " nodes.");我想我可以使用fancytree实例，上面示例中的变量'tree‘来访问所有节点，以便收集它们所采用的值。但是当我把这个两行的例子放到我的代码中时，我得到了错误。
为了清楚起见，我在下面粘贴了完整的代码。在代码的末尾，有两个分别用Place_1和Place_2标记的注释。当我把这两行代码放在这两个地方时，我得到了错误，分别是“未捕获的TypeError:未定义的不是函数”或“未捕获的错误:无法在初始化前调用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>回答 1
Stack Overflow用户
发布于 2014-12-05 05:57:27
感谢Chase的建议。
我认为应该在初始化完成后将两行代码的示例添加到某个位置。
例如，我将代码添加到按钮的主体中，它工作得很好。下面是在fancytree中实现按钮的示例：http://wwwendt.de/tech/fancytree/demo/#sample-source.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27262038
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号