树形网格（TreeGrid）可以展示有限空间上带有多列和复杂数据电子表

一、案例一：按tree的数据结构来生成

前台

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

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function(){

        $('#tt').treegrid({

            url:"<%=path%>/servlet/treeGrid",

            method: 'post',

            lines: true,

            rownumbers: true,

            //定义关键字段来标识树节点

            idField: 'dept_id',

            //treeField属性定义哪个字段显示为树形菜单

            treeField: 'dept_name',

            columns:[[

                {title:'部门名称',field:'dept_name',width:180},

                {title:'平均薪水',field:'salary',width:60,align:'right'},

                {title:'部门地址',field:'address',width:80}

            ]]

        });

    });

</script>

<body>

<h2>树形网格treeGrid</h2>

<table id="tt" style="width:600px;height:400px"></table>

</body>

</html>

后台

package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

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 org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import bean.Dept;

import util.DBUtil;

/**

 * Servlet implementation class DeptServlet

 */

@WebServlet("/servlet/treeGrid")

public class DeptServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        PrintWriter out=response.getWriter();

        String treeGrid_json="";

        String sql="";

        Connection conn=null;

        try {

            conn=DBUtil.getConn();

            QueryRunner queryRunner=new QueryRunner();

            sql="select * from dept";

            List<Map<String,Object>> treeGridData=new ArrayList<Map<String,Object>>();

            Map<String,Object> deptMap=null;

            List<Dept> deptList=queryRunner.query(conn,sql,new BeanListHandler<>(Dept.class));

            Map<String,Map<String,Object>> id_map=new HashMap<String,Map<String,Object>>();

            for(Dept dept:deptList){

                deptMap=new HashMap<String,Object>();

                deptMap.put("dept_id", dept.getDept_id());

                deptMap.put("dept_name", dept.getDept_name());

                deptMap.put("salary", dept.getSalary());

                deptMap.put("address", dept.getAddress());

                id_map.put(dept.getDept_id(), deptMap);

                if(dept.getGrade()>2){

                    deptMap.put("state", "closed");

                }

                if(dept.getParent_id().equals("0")){

                    //如果是父节点，则直接添加到treeGridData中

                    treeGridData.add(deptMap);

                }else{

                    //如果是子节点

                    Map<String,Object> parenMap=id_map.get(dept.getParent_id());

                       if (parenMap != null) {

                            List<Map<String, Object>> children = null;

                            if (parenMap.get("children") == null) {

                                // 说明该父节点当前还没有一个子节点

                                children = new ArrayList<Map<String, Object>>();

                            } else {

                                children = (List<Map<String, Object>>) parenMap.get("children");

                            }

                            children.add(deptMap);

                            parenMap.put("children", children);

                        }

                }

            }

            Gson gson=new Gson();

            treeGrid_json=gson.toJson(treeGridData);

            out.println(treeGrid_json);

            out.flush();

            out.close();

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

}

结果：

异步树请参考前几章。

二、案例二：按Grid的数据结构来生成+查询功能

数据库

定义数据库函数：用于用于根据某个节点的所有父节点

BEGIN

DECLARE fid varchar(100) default '';

DECLARE str varchar(1000) default rootId;   

WHILE rootId is not null  do

    SET fid =(SELECT parent_id FROM dept WHERE dept_id = rootId);

    IF fid is not null THEN

        SET str = concat(str, ',', fid);

        SET rootId = fid;

    ELSE

        SET rootId = fid;

    END IF;

END WHILE;

return str;

END

前台

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

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function(){

        $('#tt').treegrid({

            url:"<%=path%>/servlet/treeGrid",

            method : 'post',

            lines : true,

            rownumbers : true,

            //定义关键字段来标识树节点

            idField : 'dept_id',

            //treeField属性定义哪个字段显示为树形菜单

            treeField : 'dept_name',

            columns : [ [ {

                title : '部门名称',

                field : 'dept_name',

                width : 180

            }, {

                title : '平均薪水',

                field : 'salary',

                width : 60,

                align : 'right'

            }, {

                title : '部门地址',

                field : 'address',

                width : 80

            } ] ],

            toolbar: '#search_div'

        });

    });

    function doSearch(value,name){

        var paramData={

                 name:value

        };

        $('#tt').treegrid({

            queryParams:paramData

        });

    }

</script>

<body>

    <h2>树形网格treeGrid</h2>

    <div id="search_div">

        <input class="easyui-searchbox" style="width: 300px"

            data-options="searcher:doSearch,prompt:'Please Input Value'" name="keyWord"></input>

    </div>

    <table id="tt" style="width: 600px; height: 400px"></table>

</body>

</html>

后台

package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

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 org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.MapListHandler;

import com.google.gson.Gson;

import util.DBUtil;

/**

 * Servlet implementation class DeptServlet

 */

@WebServlet("/servlet/treeGrid")

public class DeptServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        PrintWriter out = response.getWriter();

        Connection conn = null;

        Statement stat = null;

        ResultSet rs = null;

        String sql = "";

        String keyWord = request.getParameter("name");

        if (keyWord == null  || keyWord.equals("")) {

            // 如果没有查询参数

            sql = "select * from dept";

        } else {

            /**

             * 如果游查询参数 1.先找出子菜单

             */

            String tempSQL = "select dept_id,dept_name from dept where dept_name like '%" + keyWord

                    + "%'  order by dept_id asc ";

            try {

                conn = DBUtil.getConn();

                QueryRunner queryRunner = new QueryRunner();

                List<Map<String, Object>> temList = queryRunner.query(conn, tempSQL, new MapListHandler());

                StringBuffer unionSQL = new StringBuffer();

                int rowIndex = 0;

                for (Map<String, Object> temMap : temList) {

                    String tem_dept_Id = String.valueOf(temMap.get("dept_id"));

                    /**

                     * 2.根据得到的tem_dept_Id，去寻找相应的子节点

                     * 请在数据库中定义一个函数，该函数用于根据某个节点的所有父节点

                     */

                    unionSQL.append(

                            "select dept_id from dept where FIND_IN_SET(dept_id,getParentList('" + tem_dept_Id + "'))");

                    rowIndex++;

                    if (rowIndex > 0 && rowIndex != temList.size()) {

                        unionSQL.append(" union ");

                    }

                }

                if (unionSQL.length() > 0) {

                    sql = "select * from dept where dept_id in(";

                    sql = sql + unionSQL.toString();

                    sql = sql + ")";

                }

            } catch (Exception e) {

                e.printStackTrace();

            }

        }

        try {

            conn = DBUtil.getConn();

            stat = conn.createStatement();

            rs = stat.executeQuery(sql);

            List<Map<String, String>> gridDataList = new ArrayList<Map<String, String>>();

            Map<String, Object> gridDataMap = new HashMap<String, Object>();

            Map<String, String> columnMap = null;

            while (rs.next()) {

                String id = (String.valueOf(rs.getInt("dept_id")));

                String parent_id = (String.valueOf(rs.getInt("parent_id")));

                String dept_name = rs.getString("dept_name");

                String salary = rs.getString("salary");

                String address = rs.getString("address");

                columnMap = new HashMap<String, String>();

                columnMap.put("dept_id", id);

                columnMap.put("dept_name", dept_name);

                columnMap.put("salary", salary);

                columnMap.put("address", address);

                /**

                 * 加入树形表格的特殊属性，一定要加否则样式不成树状

                 */

                if (parent_id.equals("0") == false) {

                    columnMap.put("_parentId", parent_id);

                }

                gridDataList.add(columnMap);

            }

            gridDataMap.put("total", gridDataList.size());

            gridDataMap.put("rows", gridDataList);

            Gson gson = new Gson();

            String str_gridData = gson.toJson(gridDataMap);

            System.out.println(str_gridData);

            out.print(str_gridData);

        } catch (Exception e) {

            e.printStackTrace();

        }

        out.flush();

        out.close();

    }

}

结果：

（一）easyUI之树形网络的更多相关文章

数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
Jquery EasyUI Tree树形结构的Java实现（实体转换VO）
前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...
easyui tree 树形节点 formatter 渲染不起作用
接了个需求,需要对一个树形列表进行重新渲染,在进行渲染的过程中发现树形节点的formatter 属性无法生效.经反复测试,发现在外部环境中正常,但在项目环境中始终无效.最终发现问题出在 easyui ...
jquery easyui：EasyUI Treegrid 树形网格
用jquery easyui 的 Treegrid 树形网格进行数据展示,不过官网的API 和 demo 让我愣了好久,摸索后整理出来供大家详细参看. jquery easyui 官网:http:/ ...
EasyUI之树形结构tree
转自:https://blog.csdn.net/ya_1249463314/article/details/70305730 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
asp.net MVC中使用EasyUI Treegrid 树形网格
引入CSS和JS <link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" r ...
easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
（三）easyUI之树形组件
一.同步树 1.1 概念所有节点一次性加载完成 1.2 案例 1.2.1 数据库设计 1.2.2 编码 index.jsp <%@ page language="java" ...
easyui Tree树形控件的异步加载
Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...

随机推荐

Windows服务器下，Tomcat制作成服务自启动，跑不起来，报内存溢出。
测试过不行使用服务启动后,tomcat运行时会抛出各种内存溢出错误,于是我第一时间想到的是去修改catalina.bat文件中的内存设置,但是然并卵,于是我又尝试不用服务,去使用startup.ba ...
python 简化数据结构的初始化二支持关键字参数
1.例子学自cookbook3
ISO/IEC 9899:2011 条款6.4.2——标识符
6.4.2 标识符 6.4.2.1 通用语法 1.identifier: identifier-nodigit identifier identifier-nondigit identifie ...
webdriver报不可见元素异常方法总结
最近一直在学Selenium相关东西,学到webdriver这块,出现报不可见元素异常方法异常,后来网上找了好多相关资料都没搞定,也没看明白,最后发现是xpath中写了calss属性有问题.现在把学习 ...
nmealib-0.5.3 问题 Build Error: undefined reference to `ceil'
When building on Ubuntu 12.x the build fails with the following error… gcc samples/generate/main.o - ...
阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍
2 Feign远程调用在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...
【创业】2B创业历程
http://www.woshipm.com/chuangye/2800111.html http://www.woshipm.com/chuangye/2803240.html http://www ...
MySQL导入utf8编码的CSV文件
首先,作为测试,我们在这里创建一个名为testdb的数据库,和一个名为test_table的表: create database if not exists testdb default charse ...
Egret入门学习日记 --- 第三篇（书中 3.4 内容）
第三篇 (书中 3.4 内容) 今天还是要把昨天项目运行后,EXML文件里的界面没有出现的问题解决了才行. 去了群里,没人回.去了官网看文档,看不懂. 不过倒是看到了一个好东西: 还挺便宜啊,一个月要 ...
最新百合佳缘java校招面经（含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 百合佳缘等10家互联网公司的校招Offer,因为某些自身原因最终选择了百合佳缘.6.7月主要是做系统复习.项目复盘.Le ...

（一）easyUI之树形网络

一、案例一：按tree的数据结构来生成

二、案例二：按Grid的数据结构来生成+查询功能

（一）easyUI之树形网络的更多相关文章

随机推荐

热门专题