treeTable jquery的树表组件 java实现 Java实现树形菜单

最新推荐文章于 2024-03-23 06:17:57 发布

置顶

VIP文章 laonayonghaifeisi

最新推荐文章于 2024-03-23 06:17:57 发布

阅读量2.8w

点赞数 3

分类专栏： Java学习文章标签： jquery TreeTable 树形菜单

本文链接：https://blog.csdn.net/laonayonghaifeisi/article/details/51926349

版权

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

最低0.47元/天解锁文章

laonayonghaifeisi

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
treeTable jquery的树表组件 java实现 Java实现树形菜单

treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。优点兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等提供两
复制链接

扫一扫