JQuery中Ztree插件的运用

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(privileges);//把当前的树压入到栈顶
  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>

毛毛12

发布了42 篇原创文章 · 获赞 24 · 访问量 8万+

私信关注

JQuery中Ztree插件的运用

猜你喜欢