jquery下jstree简单应用 v1.0

2020-05-22 17:08:57易采站长站整理

第一篇文章,具体使用也过去很长时间了,直接贴码:
1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现
3.具有checkbox,提供获取选中节点ID方法:function getMenuIds()

<script type=”text/javascript” src=”@{‘/public/javascripts/jquery-1.4.2.min.js’}”></script>
<script type=”text/javascript” src=”@{‘/public/javascripts/jsTree/jquery.jstree.js’}”></script>
<script type=”text/javascript” src=”@{‘/public/javascripts/jsTree/_lib/jquery.hotkeys.js’}”></script>
<script type=”text/javascript” src=”@{‘/public/javascripts/jsTree/_lib/jquery.cookie.js’}”></script>
<link type=”text/css” rel=”stylesheet” href=”@{‘/public/javascripts/jsTree/_docs/!style.css’}”/>
<script type=”text/javascript”>
</script>
<table width=”100%” height=”100%” cellspacing=”0″ CELLPADDING=”0″
border=”5px”>
<caption align=”top”>
<div id=’title’ align=”center”></div>
<br />
<input type=”button” style=’left’ id=’tmp’ value=’test’ onclick=”getMenuIds()”></input>
<a href=’@{UserApplication.logout()}’ style=”display: block; float: right;”> 退出</a>
<font color=”green”><div id=”userinfo” style=”display: block; float: right;”></div></font><br/>
<tr>
<td style=”width: 20%; height: 700px”>
<div id=’tree’ style=”height: 100%” class=’body’></div>
</td>
<td>
<div id=’content’ class=”code_f”
style=’width: 98%; height: 698px; padding-top: 10px; padding-left: 10px;padding-right: -10px;’></div>
</td>
</tr>
</table>
<script type=”text/javascript”>
$(“#title”).html(“js(jstree)和play!framework的学习及应用”);
$(“#content”).html(“js(jstree)和play!framework的学习及应用”);
</script>
<script type=”text/javascript”>
function getMenuIds(){
var idArray = new Array();
$(“#tree”).find(“.jstree-checked, .jstree-undetermined “).each(function(){
var isChild = true;
if($(this).find(‘li’).length != 0){
idArray.push($(this).attr(“id”));
isChild = false;
}
if(isChild){idArray.push($(this).attr(“id”));}