您的位置：首页 > Web前端 > JQuery

JQuery中Ztree插件的运用

2017-02-04 13:27 381 查看

1、导入jquery和zTree的类库

2、把支持树的样式文件导入进来

3、有一个jar包

struts2-json-plugin-2.1.8.1

新定义了一个结果集，结果集的名称为json

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<package name="privilege" namespace="/" extends="json-default">
<action name="privilegeAction_*" method="{1}" class="privilegeAction">
<result type="json"></result>
</action>
</package>
</struts>

4、准备持久化类和映射文件

5、准备dao,service,action层和struts2的配置文件

js代码

var privilege = {
setting:{
isSimpleData: true,
treeNodeKey: "id",
treeNodeParentKey: "pid",
showLine: true,
root:{
isRoot:true,
nodes:[]
}
},
loadPrivilegeTree:function(){
$.post("privilegeAction_showPrivilegeTree.action",null,function(data){
$("#tree").zTree(privilege.setting, data);

//          alert(data);
});
}
};

$(document).ready(function(){
privilege.loadPrivilegeTree();
});

注意事项：
1、ActionContext.getContext().getValueStack().push(privi
4000
leges);//把当前的树压入到栈顶
2、在struts2的配置文件中
<package name="privilege" namespace="/" extends="struts-global">
<action name="privilegeAction_*" method="{1}" class="privilegeAction">
<result type="json"></result>
</action>
</package>

6、创建一个html:privilege.html,创建一个privilege.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ztree-2.5.js"></script>
<script type="text/javascript" src="js/privilege.js"></script>

</HEAD>

<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=230px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航