• 树形网格（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();}}

结果：

转载于:https://www.cnblogs.com/shyroke/p/7724622.html

（一）easyUI之树形网络相关推荐

  1. EasyUI之树形菜单选项卡前端应用

    tree树形控件 树控件在web页面中一个将分层数据以树形结构进行显示.它提供用户展开.折叠.拖拽.编辑和异步加载等功能. 在树形控件中每个节点都具备以下属性: id:节点ID,对加载远程数据很重要. ...

  2. asp.net MVC中使用EasyUI Treegrid 树形网格

    引入CSS和JS <link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" r ...

  3. EasyUI之树形菜单

    EasyUI是用ul和li标签来完成树形结构的组合的,一个ul可视为父节点,li作为树形结构的子节点,而li标签里面嵌套的ul标签又可以作为父节点,不断的重复从而达到完成复杂树形结构的功能. < ...

  4. EasyUI Treegrid 树形网格（官网没有提到的实现方式）

    官网实现方式:EasyUI Treegrid 没有提到的实现方式:_parentId {"id": 1,"name": "1"," ...

  5. 使用EasyUI搭建树形界面以及导航栏

    一,项目结构 二,创建数据库 CREATE TABLE t_module (id integer DEFAULT NULL,pid integer DEFAULT NULL,text VARCHAR( ...

  6. php 可以编辑treegrid,Easyui Treegrid 树形网格_EasyUI 插件

    扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid.defaults 重写默认的 defaults. 树形网格(treegrid)用于以网格形式显示分层数据.它是基 ...

  7. android代码跳过锁屏,Android_android禁止锁屏保持常亮(示例代码)，在播放video的时候在mediaplayer m - phpStudy...

    android禁止锁屏保持常亮(示例代码) 在播放video的时候在mediaplayer mMediaPlayer.setScreenOnWhilePlaying(true); 已经设置了,在原生的 ...

  8. 149.从网络的作用范围分类 150.使用范围分类 151.拓扑结构分类

    从作用范围分类 1.广域网(一个洲.国家) 2.城域网 3.局域网(公司.学校.组织) 4.个人网 从使用范围分类: 1.公用网(国家的邮电部门建立) 2.专用网(一个单位专用的网络) 从拓扑结构分类 ...

  9. 计算机系统与网络技术简答题,计算机与网络技术基础 简答题

    1如何对计算机进行分类? 按计算机原理分类:电子数字式计算机.电子模拟式计算机和混合式计算机.按用途分类:2计算机采用的数制是什么?它的特点是什么?一共有多少个数字符号? 计算机采用的数制是二进制,它 ...

最新文章

  1. python numpy hstack() from shape_base.py （将数组水平堆叠）
  2. Activiti 基础概念
  3. mysql 视图 mybatis_Mybatis调用视图和存储过程的方法
  4. 机器人收集 + Keypose 算法：准确估计透明物体的 3D 姿态
  5. 推荐系统实践--基于用户的协同过滤算法
  6. Python常用的设计模式
  7. Salesforce入门教程（中文）-020 VF使用静态资源移动端开发（未完）
  8. sublime 配置快捷键
  9. 无线通信信号的功率表示方法中dBm,dB与w的换算关系
  10. 硬件之家 | 智能手环、手表是如何监测睡眠的
  11. webgl天空盒边界缝隙_基于webGL技术的3D库ThingJS支持天空盒技术实现
  12. 计算机自定义桌面,如何自定义电脑桌面的图标显示
  13. mfc键盘控制移动鼠标光标_如何在Windows中使用键盘控制鼠标光标
  14. 『辞旧迎新』一个只会写Bug的Coder年终总结
  15. JSP中用List list = new ArrayList();报错, List cannot be resolved to a type
  16. 看板的作用是什么？任务看板如何跟进
  17. 阿里云服务器云数据库免费体验（Java Web详细实例）
  18. Python练习：每月乘坐地铁费用
  19. 卷积到底卷了个啥？--卷积定理详解（一）
  20. Idea Intellij 远程开发调试

热门文章

  1. ui设计师常用的设计工具_2020年应该使用哪个UI设计工具？
  2. 设计师更高效_如何丢掉我的工作使我成为一名更好的设计师
  3. Vue.js 官方团队成员霍春阳新作，深入解析 Vue.js 设计细节【文末送书】
  4. Buildroot 龙芯1C支持指南
  5. svn强制要求提交注释
  6. LINUX内核完全注释
  7. sessionfunctionphp实战第六天
  8. C++ virtual笔试
  9. aop实现原理_从宏观的实现原理和设计本质入手，带你理解 AOP 框架的原理
  10. 通过java类的反射机制获取类的属性类型