04 jquery easyui 之 Tree

樹(shù)（Tree）可以在一個(gè)空的 <ul> 元素中定義，可使用 javascript 加載數(shù)據(jù)。

在body中添加ul標(biāo)簽

<ul id="tt"></ul>

然后在使用javascript代碼加載數(shù)據(jù)

使用JSON加載數(shù)據(jù)

$('#tt').tree({ url:'treedata.json'});

樹(shù)的數(shù)據(jù)格式（Tree Data Format）

每個(gè)節(jié)點(diǎn)可以包括下列屬性：

• id：節(jié)點(diǎn)的 id，它對(duì)于加載遠(yuǎn)程數(shù)據(jù)很重要。

• text：要顯示的節(jié)點(diǎn)文本。

• state：節(jié)點(diǎn)狀態(tài)，'open' 或 'closed'，默認(rèn)是 'open'。當(dāng)設(shè)置為 'closed' 時(shí)，該節(jié)點(diǎn)有子節(jié)點(diǎn)，并且將從遠(yuǎn)程站點(diǎn)加載它們。

• checked：指示節(jié)點(diǎn)是否被選中。

• attributes：給一個(gè)節(jié)點(diǎn)添加的自定義屬性。

• children：定義了一些子節(jié)點(diǎn)的節(jié)點(diǎn)數(shù)組。

數(shù)據(jù)格式示例：

[{
   "id":1,
   "text":"Folder1",
   "iconCls":"icon-save",
   "children":[{
"text":"File1",
"checked":true
   }]
  }]

事件

很多事件的回調(diào)函數(shù)需要 'node' 參數(shù)，它包括下列屬性：

• id：綁定到節(jié)點(diǎn)的標(biāo)識(shí)值。

• text：要顯示的文本。

• iconCls：用來(lái)顯示圖標(biāo)的 css class。

• checked：節(jié)點(diǎn)是否被選中。

• state：節(jié)點(diǎn)狀態(tài)，'open' 或 'closed'。

• attributes：綁定到節(jié)點(diǎn)的自定義屬性。

• target：目標(biāo)的 DOM 對(duì)象。

  
  

JSP+Servlet+JSON樹(shù)形菜單示例：

數(shù)據(jù)庫(kù)表：

數(shù)據(jù)庫(kù)表SQL：

CREATE TABLE `menu_info` (
  `menu_id` int(11) NOT NULL auto_increment,
  `men_menu_id` int(11) default NULL,
  `menu_name` varchar(100) default NULL,
  `menu_url` varchar(500) default NULL,
  `menu_seq` int(11) default NULL,
  `menu_desc` varchar(1000) default NULL,
  `role_mark` varchar(10) default NULL,
  PRIMARY KEY  (`menu_id`),
  KEY `FK_Reference_2` (`men_menu_id`),
  CONSTRAINT `FK_Reference_2` FOREIGN KEY (`men_menu_id`) REFERENCES `menu_info` (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records 
-- ----------------------------
INSERT INTO `menu_info` VALUES ('1', null, '系統(tǒng)管理', null, null, null, null);
INSERT INTO `menu_info` VALUES ('2', '1', '部門管理', null, null, null, null);
INSERT INTO `menu_info` VALUES ('3', '4', '車輛管理', null, null, null, null);
INSERT INTO `menu_info` VALUES ('4', '1', '駕駛員管理', null, null, null, null);
INSERT INTO `menu_info` VALUES ('6', '1', '人員管理', null, null, null, null);

數(shù)據(jù)庫(kù)DAO查詢數(shù)據(jù)：

package com.car.system.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.car.po.MenuInfo;
import com.car.po.UserInfo;
import com.car.system.dao.MenuInfoDAO;
import com.car.utils.DB;
public class MenuInfoDAOImpl implements MenuInfoDAO{
    @Override
    public List<MenuInfo> getList() {
        Connection con = null;
        PreparedStatement pre = null;
        ResultSet res = null;
        try {
            String sql = "select * from menu_info";
            con = DB.getDB();
            pre = con.prepareStatement(sql);
    
            res = pre.executeQuery();
            List<MenuInfo> list = new ArrayList<MenuInfo>();
            while (res.next()) {
                MenuInfo menu = new MenuInfo();
                menu.setMenuId(res.getInt("menu_id"));
                menu.setMenuName(res.getString("menu_name"));
                menu.setPmenuId(res.getInt("men_menu_id"));
                list.add(menu);
            }
            return list;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DB.close(con, pre, res);
        }
        return null;
    }
}

編寫TreeNode類

package com.car.po;
import java.util.List;
public class TreeNode {
    private int id;
    private String text;
    private String url;
    private int pid;
    private List<TreeNode> children;
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public List<TreeNode> getChildren() {
        return children;
    }
    public void setChildren(List<TreeNode> children) {
        this.children = children;
    }
}

編寫JSON公共轉(zhuǎn)換類

package com.car.utils;
import java.util.ArrayList;
import java.util.List;
import com.car.po.TreeNode;
public class JSON {
    
    public static List<TreeNode> buildtree(List<TreeNode> nodes, int id) {
        List<TreeNode> treeNodes = new ArrayList<TreeNode>();
        for (TreeNode treeNode : nodes) {
            TreeNode node = new TreeNode();
            node.setId(treeNode.getId());
            node.setText(treeNode.getText());
            node.setUrl(treeNode.getUrl());
            if (id == treeNode.getPid()) {
                node.setChildren(buildtree(nodes, node.getId()));
                treeNodes.add(node);
            }
        }
        return treeNodes;
    }
}

編寫Servlet類：

package com.car.system.servlet.menuinfo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.car.po.MenuInfo;
import com.car.po.TreeNode;
import com.car.system.dao.MenuInfoDAO;
import com.car.system.dao.impl.MenuInfoDAOImpl;
import com.car.utils.JSON;
/**
 * Servlet implementation class MenuInfoServlet
 */
@WebServlet("/menuInfolist")
public class MenuInfoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MenuInfoServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("--------------");
        this.doPost(request, response);
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        MenuInfoDAO dao = new MenuInfoDAOImpl();
        List<MenuInfo> list = dao.getList();
        
        List<TreeNode> nodes=new ArrayList<TreeNode>();
            for(MenuInfo menu:list){
                TreeNode treeNode = new TreeNode();
                if(menu.getMenuId()==null){
                    treeNode.setId(0);
                }else{
                    treeNode.setId(menu.getMenuId());
                }
                treeNode.setUrl("http://www.baidu.com");
                treeNode.setPid(menu.getPmenuId());
                treeNode.setText(menu.getMenuName());
                nodes.add(treeNode);
            }
            List<TreeNode> treeNodes=JSON.buildtree(nodes,0);
            
            JSONArray jsonArray = JSONArray.fromObject(treeNodes);
            
            
            response.setContentType("text/json");
            response.setCharacterEncoding("utf-8");
            PrintWriter out = response.getWriter();
            out.print(jsonArray);
            out.flush();
            out.close();
            
    }
}

編寫Tree.jsp頁(yè)面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>首頁(yè)</title>
<link rel="stylesheet" type="text/css"
    href="resource/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resource/easyui/themes/icon.css">
<script type="text/javascript" src="resource/easyui/jquery.min.js"></script>
<script type="text/javascript" src="resource/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$().ready(function(){
     $('#tt').tree({
        url:'menuInfolist',
        onContextMenu: function(e, node){
            e.preventDefault();
            $('#tt').tree('select', node.target);
        
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY,
                onClick:function(item){
                    var text = item.text;
                    if(item.text=='添加'){
                        alert(node.url);
                        window.mainframe.location="add";
                    }else if(item.text=='修改'){
                        window.mainframe.location="update";
                    }else if(item.text=='刪除'){
                        window.mainframe.location="delete";
                    }
                }
            });
        }
     });
});
</script>
</head>
<body>
    <ul id="tt">
    </ul>
    <div id="mm" class="easyui-menu" >
    <div  data-options="iconCls:'icon-add'" >添加</div>
    <div  data-options="iconCls:'icon-edit'">修改</div>
    <div  data-options="iconCls:'icon-remove'">刪除</div>
    </div>
    <iframe name="mainframe"></iframe>
</body>
</html>

效果圖：

參考API地址：

tree：http://www.jeasyui.net/plugins/185.html

menu: http://www.jeasyui.net/plugins/163.html