JQuery中Ztree插件的运用

最新推荐文章于 2020-02-28 18:09:40 发布

毛毛12

最新推荐文章于 2020-02-28 18:09:40 发布

阅读量339

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/zhang245754954/article/details/54862535

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>