easyui treegrid

总体效果：

一、前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CheckBox Tree - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="assets/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="assets/themes/icon.css"><script type="text/javascript" src="assets/jquery.min.js"></script><script type="text/javascript" src="assets/jquery.easyui.min.js"></script>
<title>可编辑的表格树</title>
</head><!-- //treegrid主表 --><table id="tg" class="easyui-treegrid" title="菜单管理"style="width: 700px; height: 600px" toolbar="#toolbar"data-options="iconCls: 'icon-ok',rownumbers: true,animate: true,fitColumns: true,url: 'getmenutree',method: 'get',idField: 'id',treeField: 'name',onContextMenu: onContextMenu,collapsible: true,showFooter: true"><thead><tr><th data-options="field:'name',width:180,editor:'text'"> Name</th><th data-options="field:'urls',width:60,align:'right',editor:'text'">url</th></tr></thead></table>
<div id="toolbar">  <a href="#" class="easyui-linkbutton"  data-options="iconCls:'icon-edit'" οnclick="beginEdit()">编辑</a> <a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"οnclick="saveUpdate()">保存编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="cancel()">取消编辑</a><a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-add'" οnclick="appendRoot()">新增根目录</a> <ahref="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"οnclick="append()">新增目录</a> <a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"οnclick="saveEdit()">保存新增</a> <a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-cancel'" οnclick="removeIt()">删除</a></div>
<!-- //右键菜单选项 --><div id="mm" class="easyui-menu" style="width: 120px;"><div οnclick="append()" data-options="iconCls:'icon-add'">新增</div><div οnclick="removeIt()" data-options="iconCls:'icon-remove'">删除</div><div class="menu-sep"></div><div οnclick="collapse()">收起</div><div οnclick="expand()">展开</div></div>
<script type="text/javascript">//treegrid 的js代码//编辑目录var editingId=null; var editid;var flag=1;//新增子菜单,flag为0表示新增父级菜单function ff(row) {/*  $('#tg').treegrid('options').url ='/courseType/getCourseType?parentId='+row.id; */}function formatProgress(value) {if (value) {var s = '<div style="width:100%;border:1px solid #ccc">'+ '<div style="width:' + value+ '%;background:#cc0000;color:#fff">' + value + '%' + '</div>''</div>';return s;} else {return '';}}function onContextMenu(e, row) {if (row) {e.preventDefault();$(this).treegrid('select', row.id);$('#mm').menu('show', {left : e.pageX,top : e.pageY});}}
//生成节点IDfunction uuid() {var s = [];var hexDigits = "0123456789abcdef";for (var i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01s[8] = s[13] = s[18] = s[23] = "";var uuid = s.join(""); return uuid;}//添加节点，新增目录function append() {if (editingId != null){$.messager.alert("提示信息", "请先保存未保存的信息");return;}var uid=uuid();//新增菜单的idvar node = $('#tg').treegrid('getSelected');//选中的节点expand();var parentId;if(node.pid!=0){//不是父级菜单$.messager.alert("提示信息","此菜单不可以有子菜单，请在父级菜单中新增");}else{if(node) parentId=node.id;//flag=1;else parentId=null;$('#tg').treegrid('append', {parent : parentId,data : [ {id : uid,name : '',sort :'1'} ]})editingId=uid;if (editingId != null){$('#tg').treegrid('select', editingId);}$('#tg').treegrid('beginEdit', editingId);editid=node.id;}//else结束}//添加跟节点function appendRoot() {if (editingId != null){$.messager.alert("提示信息", "请先保存");return;}flag=0;var uid=uuid();var node = $('#tg').treegrid('getSelected');expand();$('#tg').treegrid('append', {parent : null,data : [ {id : uid,typeName : '',sort :'1'} ]})editingId=uid;if (editingId != null){$('#tg').treegrid('select', editingId);}$('#tg').treegrid('beginEdit', editingId);}
//移除节点function removeIt() {if (editingId != null){$.messager.alert("提示信息", "请先保存");return;}var node = $('#tg').treegrid('getSelected');if (node==null)$.messager.alert("提示信息", "请选择一个节点");if (node) {var id=node.id;var pid=node.pid;var a;if(id<=20){//不可以删除$.messager.alert("提示信息", "此为系统原生功能，不可以删除");}else{//可以删除if(pid==0){//删除的为根节点a=confirm('确定删除此菜单及其子菜单吗');}else{//删除的为子节点a=confirm('确定删除此菜单吗');}if(a){//删除的ajaxvar dt="&id="+id+"&pid="+pid;$.post("deletemenu",dt,function(data){alert(data);if(data.endsWith("成功")){$('#tg').treegrid('remove', node.id);}})}}}}function collapse() {var node = $('#tg').treegrid('getSelected');if (node) {$('#tg').treegrid('collapse', node.id);}}
//展开节点function expand() {var node = $('#tg').treegrid('getSelected');if (node) {$('#tg').treegrid('expand', node.id);}}//开始编辑function beginEdit(){if (editingId != null){$('#tg').treegrid('cancelEdit', editingId);$('#tg').treegrid('select', editingId);editingId = null;return;}var row = $('#tg').treegrid('getSelected');if (row){editingId = row.id$('#tg').treegrid('beginEdit', editingId);}}
//保存新增的编辑function saveEdit(){if (editingId != null){var t = $('#tg');t.treegrid('endEdit', editingId);$('#tg').treegrid('select', editingId);var row = $('#tg').treegrid('getSelected');if(flag==0){editid=0;} var name=row.name;var urls=row.urls;var dt="&name="+name+"&urls="+urls+"&pid="+editid;$.post("addmenu",dt,function(data){alert(data);})editingId = null;}}function cancel(){if (editingId != undefined){$('#tg').treegrid('cancelEdit', editingId);editingId = undefined;}$(".actionbtn").toggleClass("l-btn-disabled");}</script></html>

二、后台：

1、获取表格数据：

（1、）首先需要遵循reasyui treegrid API的规范，实体类有id、pid、children属性。实体类

package com.ifytek.domain;import java.io.Serializable;
import java.util.ArrayList;import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Transient;
@Entity
@Table(name="menu")
public class Menu implements Serializable{@Idint id;int pid;String urls;String name;@TransientArrayList<Menu> children = new ArrayList<>();public int getId() {return id;}public void setId(int id) {this.id = id;}public int getPid() {return pid;}public void setPid(int pid) {this.pid = pid;}public String getUrls() {return urls;}public void setUrls(String urls) {this.urls = urls;}public ArrayList<Menu> getChildren() {return children;}public void setChildren(ArrayList<Menu> children) {this.children = children;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Menu() {super();// TODO Auto-generated constructor stub}public Menu(int id, int pid, String urls, String name) {//super();this.id = id;this.pid = pid;this.urls = urls;this.name = name;}}

（2、）servlet:

package com.ifytek.controller;import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
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 com.alibaba.fastjson.JSON;
import com.ifytek.service.MenuService;
import com.ifytek.service.UserService;@WebServlet("/getmenutree")
public class GetMenuTreeServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json;charset=utf-8");//得到所有菜单MenuService service=new MenuService();String menujson=service.getMenuJson();//System.out.println(menujson);resp.getWriter().write(menujson);}}

（3、）service:

public String getMenuJson() {MenuDao dao=new MenuDao();ArrayList<Menu> menus = dao.getMenuJson();ArrayList<Menu> fmenu = new ArrayList<>();for (Menu menu : menus) {if (menu.getPid() == 0) {// 一级菜单//System.out.println("..." + menu.getId());//System.out.println("一级菜单:  " + menu.getName());fmenu.add(menu);} else {// 非一级菜单}}for (Menu menu : menus) {if (menu.getPid() != 0) {//System.out.println("。。。" + menu.getId());for (Menu fm : fmenu) {if (menu.getPid() == fm.getId()) {fm.getChildren().add(menu);}}}}return JSON.toJSONString(fmenu,true);}

（4、）dao:

public ArrayList<Menu> getMenuJson() {Session session=HibernateUtil.getSessionFactory().openSession();String hql = "select new Menu(m.id,m.pid,m.urls,m.name) from Menu m ";/*String sql = "select Menu(m.id,m.pid,m.urls,m.name) from Menu m left join RoleMenu rm "+ " on m.id=rm.mid left join LoginRole lr on lr.rid=rm.rid where lr.lid=?";*/Query query=session.createQuery(hql);ArrayList<Menu> list= (ArrayList<Menu>) query.list();//System.out.println("list为"+list);session.close();return list;}

2、新增菜单：我这里简化了一下，只有父级菜单可以添加子菜单，子菜单不可以再添加子菜单：

（1、）servlet:

package com.ifytek.controller;import java.io.IOException;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 com.ifytek.domain.Menu;
import com.ifytek.domain.Message;
import com.ifytek.service.MenuService;@WebServlet("/addmenu")
public class AddMenuServlet extends HttpServlet{@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");  resp.setContentType("text/html;charset=utf-8");System.out.println("新增菜单");MenuService service=new MenuService();String name=req.getParameter("name");String urls=req.getParameter("urls");int pid=Integer.parseInt(req.getParameter("pid"));int id=service.getMenuMaxId();Menu menu=new Menu();menu.setId(id+1);menu.setName(name);menu.setPid(pid);menu.setUrls(urls);Message message=service.addMenu(menu);resp.getWriter().write(message.getMsg());}}

（2、）service:

public Message addMenu(Menu menu) {MenuDao dao=new MenuDao();int a=dao.addMenu(menu);Message message=new Message();if(a>0){message.setCode(200);message.setMsg("添加菜单成功");message.setRes(true);}else{message.setCode(300);message.setMsg("添加菜单失败");message.setRes(false);}return message;}

（3、）dao:

public int addMenu(Menu menu) {Session session=HibernateUtil.getSessionFactory().openSession();Transaction transaction=session.getTransaction();int a=-1;transaction.begin();try{session.save(menu);transaction.commit();a=1;}catch (Exception e) {a=-1;transaction.rollback();}session.close();return a;}

3、删除菜单：考虑删除父级菜单和子级菜单两种情况：

（1、）servlet:

package com.ifytek.controller;import java.io.IOException;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 com.ifytek.domain.Message;
import com.ifytek.service.MenuService;@WebServlet("/deletemenu")
public class DeleteMenu extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");  resp.setContentType("text/html;charset=utf-8");int id=Integer.parseInt(req.getParameter("id"));int pid=Integer.parseInt(req.getParameter("pid"));MenuService service=new MenuService();Message message=service.deleteMenu(id,pid);resp.getWriter().write(message.getMsg());
}
}

（2、）service:

public Message deleteMenu(int id, int pid) {MenuDao dao=new MenuDao();Message message=new Message();int a=-1;if(pid==0){//父级菜单a=dao.deleteFatherMenu(id);}else{//子级菜单a=dao.deleteMenu(id);}if(a>=0){message.setCode(200);message.setMsg("删除菜单成功");message.setRes(true);}else{message.setCode(300);message.setMsg("删除菜单失败");message.setRes(false);}return message;}

（3、）dao:

//删除子级菜单public int deleteMenu(int id) {int a=-1;Session session=HibernateUtil.getSessionFactory().openSession();Transaction transaction=session.getTransaction();transaction.begin();try{//删除Menu表String hql="delete from Menu m where m.id=?";Query query=session.createQuery(hql);query.setInteger(0, id);a=query.executeUpdate();//删除RoleMenu表String hql1="delete from RoleMenu r where r.mid=?";Query query1=session.createQuery(hql1);query1.setInteger(0, id);a=query1.executeUpdate();transaction.commit();}catch (Exception e) {transaction.rollback();a=-1;}session.close();return a;}
//删除父级菜单public int deleteFatherMenu(int id) {int a=-1;Session session=HibernateUtil.getSessionFactory().openSession();Transaction transaction=session.getTransaction();transaction.begin();try{//删除RoleMenu表String hql1="delete from RoleMenu r where r.mid in(select m.id from Menu m where m.id=? or m.pid=?)";Query query1=session.createQuery(hql1);query1.setInteger(0, id);query1.setInteger(1, id);a=query1.executeUpdate();System.out.println("删除rolemenu表"+a);//删除Menu表String hql="delete from Menu m where m.id=? or m.pid=?";Query query=session.createQuery(hql);query.setInteger(0, id);query.setInteger(1, id);a=query.executeUpdate();System.out.println("删除menu表"+a);transaction.commit();System.out.println("已提交");}catch (Exception e) {transaction.rollback();a=-1;}session.close();return a;}

easyui treegrid相关推荐

easyui treegrid idField 所在属性中值有花括号（如Guid）当有鼠标事件时会报错，行记录一下...
easyui treegrid idField 所在属性中值有花括号(如Guid)当有鼠标事件时会报错,行记录一下转载于:https://www.cnblogs.com/xiaoruilin/p/6 ...
适用于zTree 、EasyUI tree、EasyUI treegrid
#region System.Text.StringBuilder b_appline = new System.Text.StringBuilder(); Syst ...
ajax treegrid 选中,easyui treeGrid异步加载子节点示例
easyui treeGrid异步加载子节点示例.如果要异步加载treegrid的子节点,需要输出扁平的数据结构,然后通过_parentId来控制treegrid的父节点子节点结构.嵌套的childr ...
EasyUI Treegrid 树形网格（官网没有提到的实现方式）
官网实现方式:EasyUI Treegrid 没有提到的实现方式:_parentId {"id": 1,"name": "1"," ...
easyUI treeGrid 编辑网格
easyUI treeGrid 编辑网格的时候使用 beginEdit , 记的在表头单元 th 增加属性 editor='text'(text是类型,类似于input的类型,可以为numberbox ...
.net mvc mssql easyui treegrid
效果图数据图可以看到这里是根据 MenuNo 来分级别的,支持无限极,第一级是 01 ,第二级就是 01XX ,第三级就是 01XXOO.类似 id.pid ,Ztree 里面也是这 ...
easyui treegrid实现的两种方式
感觉easyui官方的treegrid文档不是很清晰,当时使用的时候查了许多资料才做出来,现在总结一下两种实现方式的思路: 两种方式前台都一样: $('#tree').treegrid({url:&q ...
html中treegrid不显示根节点,easyUI TreeGrid的加载问题
工作的原因,以后主要做一些JavaWeb的开发工作,开辟这个文章集主要用来记录学习的过程和分享遇到的问题,方便日后回顾或许还能帮助网友解决相同的问题. easyUi的TreeGrid的问题 easyu ...
easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...

easyui treegrid

easyui treegrid相关推荐

最新文章

热门文章