easyui-treegrid的案例

1.前台html

<%@ page language="java" contentType="text/html; charset=UTF-8"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>
<title>丰缘管理系统 - 顺丰速运集团</title>
<%@include file="../header.jsp"%>
</head>
<body><table id="function_tb" class="easyui-treegrid" treeField="funcName"></table><div id="dlg" class="easyui-dialog"style="width: 500px; height: 250px; padding: 10px 30px;" title="添加功能"buttons="#dlg-buttons" closed="true"><form id="ff" action="../service/func/add" method="post"><table><tr><td>上级菜单:</td><td><select class="easyui-combotree" id="add_select" url = "../service/func/allTree"name="parentId" style="width: 156px;" /></td></tr><tr><td>功能名称:</td><td><input type="text" name="funcName" style="width: 350px;" /></td></tr><tr><td>功能路径:</td><td><input type="text" name="url" style="width: 350px;" /></td></tr></table></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok"onclick="addFunc()">确定</a> <a href="#" class="easyui-linkbutton"iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a></div><script type="text/javascript"src="<%=request.getContextPath()%>/js/admin/function.js"></script>
</body>
</html>

2.前台js

/*** 初始化界面*/
var dataGrid;
var rowEditor = undefined;
$(function() {hideDialog();dataGrid = $("#function_tb").treegrid({url : "../service/func/all",// 加载的URLidField : "id",method : "GET",treeField : "funcName",pagination : false,// 显示分页fit : true,// 自动补全fitColumns : true,singleSelect : true,iconCls : "icon-save",// 图标columns : [ [ // 每个列具体内容
                                {field : 'id',title : '编号',align : 'center',width : 100,},{field : 'funcName',title : '功能名称',align : 'center',width : 100,editor : 'text'},{field : 'url',title : '功能路径',align : 'center',width : 100,editor : 'text'},{field : 'createTm',title : '创建时间',align : 'center',width : 100},{field : 'modifiedTm',title : '修改时间',align : 'center',width : 100},{field : 'isDelete',title : '是否禁用',align : 'center',width : 100,editor : {type : 'checkbox',options : {on : '1',off : '0'}},formatter : function(value, row, index) {if (value == '0') {return '<span style="color:green">正常</span>';} else {return '<span style="color:red">禁用</span>';}}} ] ],toolbar : [ // 工具条
                                {text : "增加",iconCls : "icon-add",handler : function() {// 回调函数
                                        openDialog();}},{text : "删除",iconCls : "icon-remove",handler : function() {var rows = dataGrid.treegrid('getSelections');if (rows.length <= 0) {$.messager.alert('警告', '您没有选择','error');} else if (rows.length > 1) {$.messager.alert('警告', '不支持批量删除','error');} else {$.messager.confirm('确定','您确定要删除吗',function(t) {if (t) {$.ajax({url : '../service/func/del',method : 'POST',data : rows[0],dataType : 'json',success : function(r) {if (r.code == "1") {dataGrid.treegrid('acceptChanges');$.messager.show({msg : r.msg,title : '成功'});editRow = undefined;dataGrid.treegrid('reload');} else {dataGrid.treegrid('beginEdit',editRow);$.messager.alert('错误',r.msg,'error');}dataGrid.treegrid('unselectAll');}});}})}}},{text : "修改",iconCls : "icon-edit",handler : function() {var rows = dataGrid.treegrid('getSelections');if (rows.length == 1) {if (rowEditor == undefined) {//var index = dataGrid.treegrid('getRowIndex', rows[0]);var index = rows[0].id;rowEditor = index;dataGrid.treegrid('unselectAll');dataGrid.treegrid('beginEdit',index);}}}}, {text : "保存",iconCls : "icon-save",handler : function() {dataGrid.treegrid('endEdit', rowEditor);rowEditor = undefined;}}, {text : "取消编辑",iconCls : "icon-redo",handler : function() {dataGrid.treegrid('cancelEdit', rowEditor);rowEditor = undefined;}} ],onAfterEdit : function(rowIndex, rowData, changes) {var inserted = dataGrid.treegrid('getChanges','inserted');var updated = dataGrid.treegrid('getChanges','updated');if (inserted.length < 1 && updated.length < 1) {editRow = undefined;dataGrid.treegrid('unselectAll');return;}var url = '';if (inserted.length > 0) {url = '../service/func/add';}if (updated.length > 0) {url = '../service/func/update';}$.ajax({url : url,method : "POST",data : rowIndex,dataType : 'json',success : function(r) {if (r.code=="1") {dataGrid.treegrid('acceptChanges');$.messager.show({msg : r.msg,title : '成功'});editRow = undefined;dataGrid.treegrid('reload');} else {/* datagrid.treegrid('rejectChanges'); */dataGrid.treegrid('beginEdit',editRow);$.messager.alert('错误', r.msg,'error');}dataGrid.treegrid('unselectAll');}});},onDblClickCell : function(index, field, value) {if (rowEditor == undefined) {dataGrid.treegrid('beginEdit', field.id);rowEditor = field.id;}}});
});var editingId;
function edit() {if (editingId != undefined) {dataGrid.treegrid('select', editingId);return;}var row = dataGrid.treegrid('getSelected');if (row) {editingId = row.id;dataGrid.treegrid('beginEdit', editingId);}
}
function save() {if (editingId != undefined) {var t = $("#function_tb");t.treegrid('endEdit', editingId);editingId = undefined;var persons = 0;var rows = t.treegrid('getChildren');for ( var i = 0; i < rows.length; i++) {var p = parseInt(rows[i].persons);if (!isNaN(p)) {persons += p;}}var frow = t.treegrid('getFooterRows')[0];frow.persons = persons;t.treegrid('reloadFooter');}
}
function cancel() {if (editingId != undefined) {dataGrid.treegrid('cancelEdit', editingId);editingId = undefined;}
}function hideDialog(){$('#dlg').dialog('close');
}function openDialog(){//$("#add_select").attr('url','../service/func/allTree');$('#add_select').combotree({  url : '../service/func/allTree'});  $('#dlg').dialog('open');
}function addFunc(){$('#ff').form('submit',{url:'../service/func/add',success:function(data){var r = JSON.parse(data);if(r.code=="1"){$.messager.show({msg : r.msg,title : '成功'});hideDialog();dataGrid.treegrid('reload');}else{$.messager.alert('错误',r.msg,'error');hideDialog();dataGrid.treegrid('reload');}}});
}

3.后台controller中

/****/
package com.sf.fys.controller.role;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.lang.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import com.google.gson.Gson;
import com.sf.fys.config.LogAppender;
import com.sf.fys.controller.BaseController;
import com.sf.fys.data.Res;
import com.sf.fys.data.TreeGrid;
import com.sf.fys.model.Function;
import com.sf.fys.result.ListResultMsg;
import com.sf.fys.result.ResultResponse;
import com.sf.fys.result.ReturnCode;
import com.sf.fys.result.StringResult;
import com.sf.fys.service.role.FunctionService;/*** @author sfit0512**/
@RestController
public class FuncController extends BaseController {
Logger log = Logger.getLogger(LogAppender.ADMIN);@Autowiredprivate FunctionService funcService;@RequestMapping(value = "/func/allTree", method = RequestMethod.POST)@ResponseBodypublic String getFuncsTree(HttpServletRequest request,HttpServletResponse response) throws Exception {Gson gson = new Gson();List<Function> list = funcService.getFuncs();if(!list.isEmpty()){String ret =  gson.toJson(list);ret = ret.replace("funcName", "text");return ret;}return FAIL;}@RequestMapping(value = "/func/roleTree", method = RequestMethod.POST)@ResponseBodypublic String getFuncsTreeByRole(HttpServletRequest request,HttpServletResponse response) throws Exception {String roleId = request.getParameter("roleId");Gson gson = new Gson();List<Function> list = funcService.getFuncsByRole(Long.parseLong(roleId));if(!list.isEmpty()){String ret =  gson.toJson(list);ret = ret.replace("funcName", "text");return ret;}return FAIL;}/*** 查询所有功能权限* @param request* @param response* @return* @throws Exception*/@RequestMapping(value = "/func/all", method = RequestMethod.GET)@ResponseBodypublic String getFuncs(HttpServletRequest request,HttpServletResponse response) throws Exception {Gson gson = new Gson();//List<Function> list = funcService.getFunctions();List<Function> list = funcService.getFuncs();TreeGrid<Function> treeGrid = new TreeGrid<Function>();treeGrid.setTotal(String.valueOf(list.size()));treeGrid.setRows(list);if(!list.isEmpty()){String ret =  gson.toJson(treeGrid);return ret;}return FAIL;}/*** 添加功能权限* @param request* @param response* @return* @throws Exception*/@RequestMapping(value = "/func/add", method = RequestMethod.POST)@ResponseBodypublic Res addFunc(HttpServletRequest request,HttpServletResponse response) throws Exception {String funcName = request.getParameter("funcName");String parentId = request.getParameter("parentId");String url = request.getParameter("url");if(parentId==null||"".equals(parentId)){parentId = "0";//为空则设为根目录
        }Function func = new Function();func.setFuncName(funcName);func.setParentId(Long.parseLong(parentId));func.setUrl(url);func.setIsDelete('0');int ret = funcService.addFunc(func);if(ret>0){return success();}return fail();}/*** 修改功能权限* @param request* @param response* @return* @throws Exception*/@RequestMapping(value = "/func/update", method = RequestMethod.POST)@ResponseBodypublic Res updateFunc(HttpServletRequest request,HttpServletResponse response) throws Exception {String funcName = request.getParameter("funcName");String parentId = request.getParameter("parentId");String url = request.getParameter("url");String isDelete = request.getParameter("isDelete");String id = request.getParameter("id");//如果不选择就是一级菜单if("".equals(parentId)){parentId = "0";}Function func = new Function();func.setFuncName(funcName);func.setParentId(Long.parseLong(parentId));func.setUrl(url);func.setIsDelete(isDelete.charAt(0));func.setId(Long.parseLong(id));int ret = funcService.updateFunc(func);if(ret>0){return success();}return fail();}/*** 删除角色* @param request* @param response* @return* @throws Exception*/@RequestMapping(value = "/func/del", method = RequestMethod.POST)@ResponseBodypublic Res deleteFunc(HttpServletRequest request,HttpServletResponse response) throws Exception {String id = request.getParameter("id");int ret = funcService.deleteFunc(Long.parseLong(id));if(ret>0){return success();}return fail();}@RequestMapping(value = "/func/getUserFunc", method = RequestMethod.POST)@ResponseBodypublic ResultResponse getUserFunc(HttpServletRequest request,HttpServletResponse response) throws Exception {String userId = request.getParameter("userId");log.info("getUserFunc|userId="+userId);if(StringUtils.isEmpty(userId)){return new StringResult(ReturnCode.FAIL, ReturnCode.get(ReturnCode.FAIL), "");}List<Function> list = funcService.getUserFunc(Long.parseLong(userId));if(null != list){return new ListResultMsg<Function>(ReturnCode.SUCCESS, "", list);}else{return new StringResult(ReturnCode.FAIL, ReturnCode.get(ReturnCode.FAIL), "");}}}4.后台service/****/
package com.sf.fys.service.role;import java.util.ArrayList;
import java.util.List;import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.sf.fys.mapper.role.FunctionMapper;
import com.sf.fys.model.Function;/*** 功能权限管理* @author sfit0512**/
@Service
public class FunctionService
{private static Logger log = Logger.getLogger(FunctionService.class);@Autowiredprivate FunctionMapper functionMapper;/*** 查询所有功能列表* @return*/public List<Function> getFuncs(){List<Function> list = functionMapper.getFuncs();List<Function> newList = getTree(list);return newList;}/*** 根据角色查询功能列表* @param roleId* @return*/public List<Function> getFuncsByRole(long roleId){List<Function> list = functionMapper.getFuncsByRole(roleId);List<Function> newList = getTree(list);return newList;}/*** 转成树形集合* @param list* @return*/public List<Function> getTree(List<Function> list){List<Function> nodeList = new ArrayList<Function>();for (Function f : list){boolean mark = false;for (Function f2 : list){if (f.getParentId() == f2.getId()){mark = true;if (f2.getChildren() == null){f2.setChildren(new ArrayList<Function>());}f2.getChildren().add(f);break;}}if (!mark){nodeList.add(f);}}return nodeList;}/*** 添加功能* @param func* @return*/public int addFunc(Function func){return functionMapper.addFunction(func);}/*** 修改功能* @param func* @return*/public int updateFunc(Function func){return functionMapper.updateFunction(func);}/*** 删除功能* @param id* @return*/public int deleteFunc(long id){return functionMapper.delFunction(id);}/*** 根据用户编号查询该用户拥有的功能权限* @param id* @return*/public List<Function> getUserFunc(long userId){log.info("getUserFunc|id=" + userId);// 1.根据用户id查询该用户拥有的角色// 2.遍历所有角色，查询对应的功能id（去掉重复）List<Function> list = functionMapper.getFuncByUser(userId);if(list!=null){log.info("getUserFunc|list.size="+list.size());}return list;}}

5.mapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.sf.fys.mapper.role.FunctionMapper"><!-- 查询所有功能 --><select id="getFuncs" resultType="com.sf.fys.model.Function">select func_id asid,func_nameas funcName,create_tm ascreateTm,modified_tm as modifiedTm,parent_idas parentId,url,is_delete as isDelete from Functionswhere is_delete =0</select><select id="getFuncsByRole" resultType="com.sf.fys.model.Function">select f.func_id asid,f.func_name as funcName,f.create_tm ascreateTm,f.modified_tm asmodifiedTm,f.parent_id as parentId,f.url,f.is_delete as isDelete fromFunctions f,Role_Functions rfwhere f.func_id = rf.func_id andf.is_delete = 0 and rf.role_id = #{roleId,jdbcType=BIGINT};</select><!-- 查询所有父节点功能 --><select id="getParentFunc" resultType="com.sf.fys.model.Function">select func_id asid,func_name as funcName,create_tm ascreateTm,modified_tm asmodifiedTm,parent_id as parentId,url,is_delete as isDelete fromFunctionswhere parent_id = 0;</select><!-- 查询父功能下的所有子功能 --><select id="getChildFunc" resultType="com.sf.fys.model.Function">selectfunc_id asid,func_name as funcName,create_tm ascreateTm,modified_tm asmodifiedTm,parent_id as parentId,url,is_delete as isDeletefromFunctionswhere parent_id = #{id,jdbcType=BIGINT};</select><!-- 添加功能 --><insert id="addFunction">insert intoFunctions(FUNC_NAME,CREATE_TM,MODIFIED_TM,PARENT_ID,URL,IS_DELETE)values(#{funcName,jdbcType=VARCHAR},now(),now(),#{parentId,jdbcType=BIGINT},#{url,jdbcType=VARCHAR},#{isDelete,jdbcType=CHAR})</insert><!-- 修改功能 --><update id="updateFunction">update Functions setFUNC_NAME=#{funcName,jdbcType=VARCHAR},MODIFIED_TM = now(),PARENT_ID =#{parentId,jdbcType=BIGINT},URL = #{url,jdbcType=VARCHAR},IS_DELETE =#{isDelete,jdbcType=CHAR}where FUNC_ID = #{id,jdbcType=BIGINT}</update><!-- 删除功能 --><delete id="delFunction"><!-- delete from Function where FUNC_ID = #{id,jdbcType=BIGINT} -->update Functions set IS_DELETE = 1 where FUNC_ID =#{id,jdbcType=BIGINT}</delete><!-- 查询某用户所有功能权限 --><select id="getFuncByUser" resultType="com.sf.fys.model.Function">select func_id asid,func_nameas funcName,create_tm ascreateTm,modified_tm as modifiedTm,parent_idas parentId,url,is_delete as isDelete from Functions where func_id in(select distinct(func_id) from Role_Functionswhere role_id in ( select role_id from Role_User where user_id = #{userId,jdbcType=BIGINT})) andis_delete =0</select></mapper>

转载于:https://www.cnblogs.com/hnsongbiao/p/8111442.html

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
总体效果: 一.前台: <%@ page language="java" contentType="text/html; charset=UTF-8"pa ...
easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...

easyui-treegrid的案例

easyui-treegrid的案例相关推荐

最新文章

热门文章