playframework中使用JsTree

1.配置

引入jquery.js，jquery.cookie.js，jquery.hotkeys.js，jquery.jstree.js和css文件_docs/syntax/!style.css，_docs/!style.css，_lib/themes/default/style.css

2.树形显示(使用html-data)

<div id="demo1" class="demo">
<ul>
<li id="phtml_1">
<a href="#">Root node 1</a>
<ul>
<li id="phtml_2">
<a href="#">Child node 1</a>
</li>
<li id="phtml_3">
<a href="#">Child node 2</a>
</li>
</ul>
</li>

</ul>
</div>

<script type="text/javascript">
$(function () {
$("#demo1")
.jstree({ "plugins" : ["themes","html_data","ui"],
"ui" : {
           "initially_select" : [ "1" ]
},
})
.bind("select_node.jstree", function (event, data) { 
 
})
.delegate("a", "click", function (event, data) { 
event.preventDefault();
})
});
</script>

效果如下：

3.使用CRRM进行编辑等操作

使用时，需要在建树时协商crrm，如：

.jstree({ "plugins" : ["themes","html_data","ui", "crrm"]})；

操作：

创建新的node-步骤：

(1)，加一个按钮

<input type="button" class="button" value="create_1" id="create_1" style="float:left;" />

(2)，与树绑定

$("#create_1").click(function () {
       $("#demo1").jstree("create");
   });

(3)，这样就可以创建新的node了

4.右键菜单

使用时，需要在树初始化时，加上contextmenu，如：

.jstree({ "plugins" : ["themes","html_data","ui", "crrm","contextmenu"]});

然后加入

.bind("create_node.jstree", function(event, data) {
alert("创建~" + data);
})
.bind("delete_node.jstree", function(event, data) {
alert('你确定要删除？');
})
.bind("rename_node.jstree", function(event, data) {
alert('你确定要rename？');
});
});

这样就可以对其右键事件进行监听。