zTree

最新推荐文章于 2024-08-17 14:15:00 发布

原创最新推荐文章于 2024-08-17 14:15:00 发布 · 1.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#zTree

zTree 介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、 树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大

准备：

1.最简单的一个tree

<%@page language="java"contentType="text/html; charset=UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>

<html>

<head>

<scripttype="text/javascript"src="<c:urlvalue='/jquery/jquery-1.8.3.js'/>"></script>

<linkrel="stylesheet"type="text/css"href="<c:urlvalue='/css/zTree/zTreeStyle/zTreeStyle.css'/>">

<scripttype="text/javascript"src="<c:urlvalue='/plugin/zTree/jquery.ztree.all-3.5.js'/>"></script>

</head>

<body>

<ulid="firstTree"class="ztree" ></ul>

</body>

<scripttype="text/javascript">

$(function(){

//设置节点

var setting={};

//节点，显示数据

var zNodes=[

{

name:"父节点1",children:[

{name:"子节点1"},

{name:"子节点2"}

]}

];

$.fn.zTree.init($("#firstTree"),setting,zNodes);

});

</script>

</html>

2.有事件的树：

<body>

<ulid="firstTree"class="ztree"></ul>

<iframename="dataFrame"width="500px;"height="500"></iframe>

</body>

<scripttype="text/javascript">

$(function(){

//设置节点

var setting={

callback:{

onClick:function(event,treeid,node){

if(node.isParent==false){

alert("叶子:"+treeid);

}

};

//节点，显示数据

var zNodes=[

{

name:"父节点1",

children:[

{

id:"C001",

name:"百度",

url:"http://www.baidu.com",

target:"dataFrame"

{name:"子节点2"}

]

{

name:"父节点2",

children:[

{name:"子节点1"},

{name:"子节点2"}

]

}

];

$.fn.zTree.init($("#firstTree"),setting,zNodes);

});

</script>

效果图：

3.结构来自于一个json数据

1.Mune.json:

[

{

id:'M001',

name:'父节点1',

children:[

{

id:'C001',

name:'子节点1'

}

]

}

]

2.zTree2.jsp

<body>

<ulid="secondTree"class="ztree"></ul>

</body>

<scripttype="text/javascript">

$(function(){

var aurl="<c:url value='/jsps/menu.json'/>";

var settings = {

async:{

enable:true,

url:aurl

}

};

$.fn.zTree.init($("#secondTree"),settings);

});

</script>

4.数据来自于数据库

1.准备：

数据库结构：

Menus
字段	类型	说明
Id
name
url
parent		自关联引用menus.id
other
isParent

创建数据结构：

create tablemenus(

id varchar(32)primarykey,

name varchar(30),

url varchar(100),

parent varchar(32),

other varchar(100),

isParent varchar(5)

);

--写入数据

insert intomenus values('M001','系统管理',null,null,'DD',true);

insert intomenus values('M002','用户管理','jsps/user.jsp','M001','Mddd',false);

insert intomenus values('M003','经理设置',null,'M001','KKKK',true);

insert intomenus values('M004','角色设置','jsps/role.jsp','M003','DDDDD',false);

创建JavaBean

public classMenu {

private String id;

private String name;

private String src;

private String parent;

private String isParent;

private String other;

2.创建MenuDao查询菜单：根据id

public classMenuDao {

publicList<Menu> query(String menuId){

String sql = "select * from menus";

if(menuId==null || menuId.trim().equals("")){

sql+=" where parent is null";

QueryRunnerrun = newQueryRunner(DataSourceUtils.getDataSource());

List<Menu>ms = run.query(sql,new BeanListHandler<Menu>(Menu.class));

return ms;

}else{

sql+=" where parent=?";

QueryRunnerrun = newQueryRunner(DataSourceUtils.getDataSource());

List<Menu>ms = run.query(sql,new BeanListHandler<Menu>(Menu.class),menuId.trim());

return ms;

}

3.创建 Servlet(应该有service,此处暂省)

import czb.menu.dao.MenuDao;
import czn.domain.Menu;
public classMenuServlet extends HttpServlet {
    private MenuDao dao = new MenuDao();
    private static final long serialVersionUID= 1L;
    public voiddoGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
        doPost(request,response);
    }
    public voiddoPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
        //接受父元素的id
        Stringid = request.getParameter("id");
        System.err.println("id is:"+id);
        List<Menu>ms = dao.query(id);
        Stringjson = JSONArray.toJSONString(ms);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(json);
    }
}

4.开发页面

src="<c:url value='/jquery/jquery-1.8.3.js'/>"></script>

href="<c:url value='/css/zTree/zTreeStyle/zTreeStyle.css'/>">

src="<c:url value='/plugin/zTree/jquery.ztree.all-3.5.js'/>"></script>

</head>

<body>

</body>

$(function(){

var aurl="<c:url value='/MenuServlet'/>";

var settings = {

async:{

enable:true,

url:aurl,

autoParam: ['id'],

type:'post'

callback:{

onClick:function(event,id,node){

if(node.isParent==false){

//以下url是为了不把项目名写死

var url = "<c:url value='/'/>"+node.src;

window.location=url;

}

};

$.fn.zTree.init($("#thirdTree"),settings);

});

</script>

效果图：