我是使用fancytree的新手。我创建了一个演示来在网页的表格中显示数据。现在我希望在用户更新数据后收集回来。
我正在使用本教程中提到的所谓的树方法。有一个示例,下面有两行:
var tree = $("#tree").fancytree("getTree");
alert("We have " + tree.count() + " nodes.");
我想我可以使用 fancytree 实例,即上面示例中的变量 'tree' 来访问所有节点,以便收集它们所采用的值。但是当我将这个两行示例放入我的代码时,我得到了错误。
为了清楚起见,我在下面粘贴了完整的代码。接近代码的末尾,有两条注释,分别标记为 Place_1 和 Place_2。当我在这两个地方分别放置两行示例时,我得到了错误,它们是“未捕获的类型错误:未定义的不是函数”或“未捕获的错误:在初始化之前无法调用 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>