真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

04jqueryeasyui之Tree

樹（Tree）可以在一個(gè)空的

    元素中定義，可使用 javascript 加載數(shù)據(jù)。

    我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、延川ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的延川網(wǎng)站制作公司

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

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

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

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

樹的數(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：用來顯示圖標(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ù)據(jù)庫(kù)表：

04 jquery easyui 之 Tree

數(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 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 list = new ArrayList();
            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 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 getChildren() {
        return children;
    }
    public void setChildren(List 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 buildtree(List nodes, int id) {
        List treeNodes = new ArrayList();
        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 list = dao.getList();
        
        List nodes=new ArrayList();
            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 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 + "/";
%>        



">
首頁(yè)





$().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";
                    }
                }
            });
        }
     });
});



    
    
    
    添加
    修改
    刪除
         

效果圖：

04 jquery easyui 之 Tree

參考API地址：

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

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

附件：http://down.51cto.com/data/2365196

分享文章：04jqueryeasyui之Tree
轉(zhuǎn)載源于：http://weahome.cn/article/gjdpeh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部