码迷，mamicode.com
首页 > 其他好文 > 详细

欢迎使用CSDN-markdown编辑器

时间：2016-07-17 00:35:33      阅读：506      评论：0      收藏：0      [点我收藏+]

标签：

treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。
优点

兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以
组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等
提供两种风格: 通过参数来设置风格

技术分享
技术分享

配置参数

theme: string {主题，有两个选项：default、vsStyle. 默认:default}
expandLevel: int {树表的展开层次. 默认:1}
column: int {可控制列的序号. 默认:0，即第一列}
onSelect: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:

function($treeTable, id) {
      //$treeTable 当前树表的jquery对象.
      //id 当前行的id

      //返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开
      return true;
}

beforeExpand: {展开子节点前触发的事件, 默认值：

function($treeTable, id) {
      //$treeTable 当前树表的jquery对象.
      //id 当前行的id
}

属性说明

id: string 行的id
pId: string 父行的id
controller: bool 指定某一个元素是否可以控制行的展开
hasChild: bool 指定某一个tr元素是否有孩子（动态加载需用到）
isFirstOne: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）
isLastOne: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）
prevId: string 前一个兄弟节点的id（自动生成属性，只读）
depth: string 当前行的深度（自动生成属性，只读）

使用递归循环把list对象转换为树形菜单结构

package com.yydhy.treetable;

import java.util.ArrayList;
import java.util.List;

/**
 * 根据实体类生成属性表格菜单 实体类有两个必须属性（set get方法） 会自动按照（id/pid）顺序递归对list集合内容排序 String
 * depart_id;//唯一id String parentid;//父id
 *此处如果父ID和id不同 可以修改代码中相关代码就可以
 * @author Administrator
 */
public class TreeList {
    private List<Department> resultNodes = new ArrayList<Department>();//树形结构排序之后list内容
    private List<Department> nodes; //传入list参数
    public TreeList(List<Department> nodes) {//通过构造函数初始化
        this.nodes = nodes;
    }

    /**
     * 构建树形结构list
     * @return 返回树形结构List列表
     */
    public List<Department> buildTree() {
        for (Department node : nodes) {
            String id = node.getDepart_id();
            if (node.getParentid() == null) {//通过循环一级节点 就可以通过递归获取二级以下节点
                resultNodes.add(node);//添加一级节点
                build(node);//递归获取二级、三级、。。。节点
            }
        }
        return resultNodes;
    }
    /**
     * 递归循环子节点
     *
     * @param node 当前节点
     */
    private void build(Department node) {
        List<Department> children = getChildren(node);
        if (!children.isEmpty()) {//如果存在子节点
            for (Department child : children) {//将子节点遍历加入返回值中
                resultNodes.add(child);
                build(child);
            }
        }
    }
    /**
     * @param node
     * @return 返回
     */
    private List<Department> getChildren(Department node) {
        List<Department> children = new ArrayList<Department>();
        String id = node.getDepart_id();
        for (Department child : nodes) {
            if (id.equals(child.getParentid())) {//如果id等于父id
                children.add(child);//将该节点加入循环列表中
            }
        }
        return children;
    }

}

Department.java 实体类对象 最重要两个属性depart_id 和parentid （父 depart_id属性）

public class Department implements java.io.Serializable {
    private static final long serialVersionUID = 1L;
    // Fields
    private String depart_id;//唯一id
    private String parentid;//父id
    private String depart_name;
    private Integer depart_type;
    private Integer depart_order;
    private Integer status;
    private String address;
    private String depart_phone;
    private String organ_id;
    private Date del_time;
    private Date create_time;

    public Department() {
    }
  //。。。省略set和get方法

}

EL表达式调用页面

<%@page import="com.yydhy.treetable.TreeList"%>
<%@page import="com.yydhy.treetable.DepartmentDAO"%>
<%@page import="com.yydhy.treetable.Department"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>树表控件</title>
        <style type="text/css">
            table,td,th {  border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
        </style>
        <!--此处引入自己的样式表和js文件 官方提供的 jquery.treeTable.js 文件引入jquery.treeTable.css 文件路径有问题
        如果F12 调试找不到该文件 可以直接在页面中引入 写成固定路径
        修改jquery.treeTable.js 这里即可
        window.SITE_URL = window.SITE_URL || ‘‘;
        if (document.location.href.indexOf(‘http://‘) != 0) {
                var path = ‘../js/treeTable/‘;
        } else {
                var path = SITE_URL + ‘js/treeTable/‘;
        }
          引用的文件 Begin-->
        <link href="css/demo.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/treeTable/jquery.treeTable.js" type="text/javascript"></script>
        <!--引用的文件 End-->
        <script type="text/javascript">
//            初始化表格样式和树形结构
            $(function () {
                var option1 = {
                    theme: ‘vsStyle‘, //显示样式
                    expandLevel: 3, //展开三级分类
                };
                $(‘#treeTable1‘).treeTable(option1);//根据表格id来初始化
            });
        </script>
    </head>
    <body>
        <div id="page">
            <fieldset>
                <legend>演示</legend>
                <table id="treeTable1" style="width:100%">
                    <tr>
                        <td style="width:200px;">标题</td>
                        <td>内容一</td>
                        <td>内容二</td>
                    </tr>
                    <c:forEach var="item" items="${listTree}" varStatus="status"> 
                        <!--判断元素是否是一级节点-->
                        <c:if test="${item.parentid!=null}">
                            <tr id=‘${item.depart_id}‘ pid=‘${item.parentid}‘>
                                <td>${item.depart_name}</td>
                                <td>${item.depart_name}</td>
                                <td>${item.depart_id}</td>
                            </tr>
                        </c:if> 
                        <c:if test="${item.parentid==null}">
                            <tr  id=‘${item.depart_id}‘>
                                <td> <span controller=‘true‘>789   ${item.depart_name}</span></td>
                                <td>${item.depart_name}</td>
                                <td>${item.depart_id}</td>
                            </tr>
                        </c:if> 
                    </c:forEach> 
                    <!--数据库加载内容开始-->
                    <!--可以通过el表达式直接调用  也可以通过Java代码调用 -->
                    <!--如果使用ajax也可以 只需要在后台请求地址中打包成json格式返回 在回调函数中 然后根据表格ID 往表格里面添加json内容即可-->
                    <!--数据库加载内容结束-->
                </table>

            </fieldset>
        </div>
    </body>
</html>

Ajax调用数据库内容json 实现

<%@page import="com.yydhy.treetable.TreeList"%>
<%@page import="com.yydhy.treetable.DepartmentDAO"%>
<%@page import="com.yydhy.treetable.Department"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>树表控件</title>
        <style type="text/css">
            table,td,th {  border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }
        </style>
        <!--此处引入自己的样式表和js文件 官方提供的 jquery.treeTable.js 文件引入jquery.treeTable.css 文件路径有问题
      如果F12 调试找不到该文件 可以直接在页面中引入 写成固定路径
      修改jquery.treeTable.js 这里即可
      window.SITE_URL = window.SITE_URL || ‘‘;
      if (document.location.href.indexOf(‘http://‘) != 0)   {
              var path = ‘../js/treeTable/‘;
      } else {
              var path = SITE_URL + ‘js/treeTable/‘;
      }
        引用的文件 Begin-->
        <link href="css/demo.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/treeTable/jquery.treeTable.js" type="text/javascript"></script>
        <!--引用的文件 End-->
        <script type="text/javascript">
            function ajaxSubmitTest() {
                console.info("正在执行Ajax请求");
                $.ajax({
                    type: "post",
                    url: "TreeServlet", //Servlet请求地址
                    dataType: "json",
                    success: function (data) {
                        var con = data.rows;//获取json中的list列表
                        var showContent = "";//添加内容变量
                        for (var i = 0, l = con.length; i < l; i++) {
                            var a = con[i];
                            if (a.parentid == null) { //判断是否是一级节点
                                showContent += "<tr id=‘" + a.depart_id + "‘>";
                                showContent += "<td><span controller=‘true‘>" + a.depart_name + "</span></td>";
                                showContent += "<td>" + a.depart_name + "</td>";
                                showContent += "<td>" + a.depart_id + "</td>";
                                showContent += "</tr>";
                            } else {
                                showContent += "<tr id=‘" + a.depart_id + "‘ pid=‘" + a.parentid + "‘>";
                                showContent += "<td>" + a.depart_name + "</td>";
                                showContent += "<td>" + a.depart_name + "</td>";
                                showContent += "<td>" + a.depart_id + "</td>";
                                showContent += "</tr>";
                            }
                        }
                        $("#treeTable1").append(showContent);
                        //以下为初始化表格样式
                        var option = {
                            theme: ‘vsStyle‘,
                            expandLevel: 2,
                        };
                        $(‘#treeTable1‘).treeTable(option);
                        console.info("内容已经加载并初始化");
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                        console.info("数据请求异常 请查看控制台错误 或者检查servlet配置")
                    }
                });
            }
            $(function () {
                ajaxSubmitTest(); //调用ajax初始化内容
            });
        </script>
    </head>
    <body>
        <div id="page">
            <fieldset>
                <legend>演示</legend>  
                <table id="treeTable1" style="width:100%">
                    <tr>
                        <td style="width:200px;">标题</td>
                        <td>内容一</td>
                        <td>内容二</td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </body>
</html>

Java后台打包json数据库

public class TreeServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        Map<String, Object> map = new HashMap<String, Object>();
        DepartmentDAO dao = new DepartmentDAO();
        List<Department> list = dao.getDepartments();
        TreeList tree = new TreeList(list);
        List<Department> listTree = tree.buildTree();
        map.put("rows", listTree);
        map.put("total", listTree.size());
        String str = JSONObject.toJSONString(map);
        response.getWriter().write(str);
    }
}

mysql数据库创建语句 sql语句在项目web目录中

DROP TABLE IF EXISTS `department_info`;
CREATE TABLE `department_info` (
  `depart_id` varchar(32) NOT NULL COMMENT ‘部门id‘,
  `depart_name` varchar(50) DEFAULT NULL COMMENT ‘部门名称‘,
  `parentid` varchar(32) DEFAULT NULL COMMENT ‘部门父id‘,
  `depart_type` int(11) DEFAULT ‘1‘ COMMENT ‘类型(1 联社 2部门 3网点)‘,
  `depart_order` int(11) DEFAULT NULL COMMENT ‘排序号‘,
  `del_time` datetime DEFAULT NULL COMMENT ‘删除时间‘,
  `address` varchar(500) DEFAULT NULL,
  `depart_phone` varchar(11) DEFAULT NULL,
  `organ_id` varchar(32) DEFAULT NULL COMMENT ‘机构ID‘,
  `create_time` datetime DEFAULT NULL COMMENT ‘创建时间‘,
  `status` int(11) DEFAULT ‘1‘ COMMENT ‘状态（1：可见，2：隐藏）‘,
  PRIMARY KEY (`depart_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of department_info
-- ----------------------------
INSERT INTO `department_info` VALUES (‘0c0a656e48ac4070bc9d815c7d941fc5‘, ‘办公室‘, null, ‘1‘, null, null, null, null, null, ‘2016-07-05 14:59:50‘, ‘1‘);
INSERT INTO `department_info` VALUES (‘0e655c7c298a4efdb3fafeeac2c8a049‘, ‘昆明北京路营业厅‘, ‘ffadacc1bd964999a666b87642ea4813‘, ‘3‘, null, null, ‘昆明北京路‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘1bdf8270e8654e40866f2a95f3a3b37d‘, ‘信贷部‘, null, ‘1‘, null, null, null, null, null, ‘2016-07-10 15:42:05‘, ‘1‘);
INSERT INTO `department_info` VALUES (‘689786b7253a405aa94008f81e222512‘, ‘昆明信贷‘, ‘1bdf8270e8654e40866f2a95f3a3b37d‘, ‘2‘, null, null, ‘昆明‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘7dba664830e8480cb5dbf142bf668262‘, ‘玉溪信贷部‘, ‘1bdf8270e8654e40866f2a95f3a3b37d‘, ‘2‘, null, null, ‘玉溪‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘9213d0c55fa44185bb7559eeed7ceea1‘, ‘营业部‘, null, ‘1‘, null, null, null, null, null, ‘2016-07-05 15:00:06‘, ‘1‘);
INSERT INTO `department_info` VALUES (‘b28c8b7074db49b1b835beb894feace7‘, ‘党建部‘, null, ‘1‘, null, null, null, null, null, ‘2016-07-10 15:41:04‘, ‘1‘);
INSERT INTO `department_info` VALUES (‘b436cb4faef7456aa1e169c7fa4cfffa‘, ‘昆明拓东营业厅‘, ‘ffadacc1bd964999a666b87642ea4813‘, ‘3‘, null, null, ‘昆明拓东‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘c30287fd04f943bebe2e2d441dcaab9d‘, ‘玉溪信贷部‘, ‘1bdf8270e8654e40866f2a95f3a3b37d‘, ‘1‘, null, ‘2016-07-10 15:54:02‘, ‘玉溪‘, ‘11‘, ‘f7b9d748061948e693b54d86c9344a81‘, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘c54f9a0d66434ffa87054004cb1dca01‘, ‘昆明办公室‘, ‘0c0a656e48ac4070bc9d815c7d941fc5‘, ‘2‘, null, null, ‘昆明‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘d0f5d72cb64c40f3be0a510141467253‘, ‘玉溪营业厅‘, ‘9213d0c55fa44185bb7559eeed7ceea1‘, ‘3‘, null, null, ‘玉溪‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘e11fdd8b107647bda4fbef1b8ebb015c‘, ‘玉溪办公室‘, ‘0c0a656e48ac4070bc9d815c7d941fc5‘, ‘2‘, null, null, ‘玉溪‘, ‘123456‘, null, null, ‘1‘);
INSERT INTO `department_info` VALUES (‘ec3d13c0c6db4e2084470eda5f8b294e‘, ‘科技部‘, null, ‘1‘, null, null, null, null, null, ‘2016-07-10 15:41:34‘, ‘1‘);
INSERT INTO `department_info` VALUES (‘ffadacc1bd964999a666b87642ea4813‘, ‘昆明营业厅tqm‘, ‘c54f9a0d66434ffa87054004cb1dca01‘, ‘2‘, null, null, ‘昆明‘, ‘123456‘, null, null, ‘1‘);

技术分享

技术分享

下载地址：http://download.csdn.net/detail/laonayonghaifeisi/9577951
大家可以下载看看 里面的递归获取子节点算法 很有意思

欢迎使用CSDN-markdown编辑器

标签：

原文地址：http://blog.csdn.net/laonayonghaifeisi/article/details/51926349
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！