今天郁闷啊,easyui下的treegrid各种问题,各种促发不到事件,各种后台转换json,写这篇文章就是记录下来,以后好提醒自己。
第一步:js页面代码和官方的给代码一样如下:
<table title="Products" class="easyui-treegrid" data-options=" url: '${path}/plat/view.do', rownumbers: true, fit:'true', pagination: true, idField: 'id', treeField: 'nameCn', onBeforeLoad: function(row,param){ console.log(row); if (!row) { // load top level rows param.id = 1; // set id=0, indicate to load new page rows } } "> <thead> <tr> <th field="nameCn" width="250">分类名称(中)</th> <th field="nameEn" width="250" >分类名称(英)</th> <th field="skillName" width="150" >技能</th> <th field="STATUS" width="150" formatter="formatDollar">装态</th> <th field="sort" width="150" >排序</th> </tr> </thead> </table> <script> function formatDollar(value){ if (value == 101001){ return '可用'; } else { return '不可用'; } } </script>
在这里要说明的是param.id = 1;是初始化的时候未传入id,所以给个默认值(根目录父类编号),好查询出更目录,一般是0。我的数据库设计比较特殊,所以是1,有的说要促发事件,追加节点,我想说的是完全没必要。
第二步:写controller代码,默认post提交,传入参数有id:父类编号,page:当前页,row:分页条数。代码如下:
package com.zerdoor.controller; import com.google.gson.Gson; import com.google.gson.JsonObject; import com.zerdoor.model.TaskType; import com.zerdoor.pagehelper.PageHelper; import com.zerdoor.pagehelper.PageInfo; import com.zerdoor.service.PlatSetService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletRequest; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * Project: acgplat * Module ID: 011 * Comments: 平台设置管理 * JDK version used: JDK1.7 * Namespace: controller * Author:xiaobo * Create Date:2014-11-24 * Modified By: <修改人中文名或拼音缩写> * Modified Date: <修改日期,格式:YYYY-MM-DD> * Why & What is modified <修改原因描述> * Version: <版本号> */ @Controller @RequestMapping("plat") public class PlatController { @Autowired private PlatSetService platSetService; @RequestMapping(value = "/index",method = RequestMethod.GET) public String index(){return "/setting/view";} /** * 查询树形列表(任务分类) * @param id 任务父类编号 * @param request * @param page 当前页 * @param rows 页大小 * @return */ @RequestMapping(value = "view", method = RequestMethod.POST) @ResponseBody public String view(int id,HttpServletRequest request,int page,int rows){ Map<String,Object> map = new HashMap<String,Object>(); map.put("id",id); //第一次访问时id=1,分页时id=1 if(id == 1){ PageHelper.startPage(page, rows); List<Map<String, Object>> list = platSetService.getTaskTypeInfo(map); PageInfo pageInfo = new PageInfo(list); Gson gson = new Gson(); Map<String,Object> obj = new HashMap<String, Object>(); obj.put("rows", getJson(list)); obj.put("total", pageInfo.getTotal()); String result = gson.toJson(obj); return result; }else{ //id!=1时添加子节点 List<Map<String, Object>> list = platSetService.getTaskTypeInfo(map); Gson gson = new Gson(); return gson.toJson(list); } } /** * 初始化list列表 * @param list * @return */ public List<TaskType> getJson(List<Map<String, Object>> list){ List<TaskType> list2 = new ArrayList<TaskType>(); for (Map<String, Object> temp : list){ TaskType t = new TaskType(); t.setId(Integer.parseInt(temp.get("id").toString())); t.setNameCn(temp.get("nameCn").toString()); t.setNameEn(temp.get("nameEn").toString()); t.setSort(Integer.parseInt(temp.get("sort").toString())); t.setSTATUS(Integer.parseInt(temp.get("STATUS").toString())); t.setSkill(temp.get("skill").toString()); list2.add(t); } return list2; } }
TaskType类代码如下:
package com.zerdoor.model; /** * Created by xiaoji on 2015/1/26. */ public class TaskType { public int id; public String nameCn; public String nameEn; public int sort; public int STATUS; public String skill; private int parentId; private String state = "closed"; public TaskType(){ } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getNameCn() { return nameCn; } public void setNameCn(String nameCn) { this.nameCn = nameCn; } public String getNameEn() { return nameEn; } public void setNameEn(String nameEn) { this.nameEn = nameEn; } public int getSort() { return sort; } public void setSort(int sort) { this.sort = sort; } public int getSTATUS() { return STATUS; } public void setSTATUS(int STATUS) { this.STATUS = STATUS; } public String getSkill() { return skill; } public void setSkill(String skill) { this.skill = skill; } public int getParentId() { return parentId; } public void setParentId(int parentId) { this.parentId = parentId; } public String getState() { return state; } public void setState(String state) { this.state = state; } }
上面这个类有四个属性很重要id,name,parentId,state = "closed"(我就死在这个属性上,没这个属性,你异步加载点击促发不到方法),
下面把gson包的maven地址一起发了
<dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.2.4</version> </dependency>
以上就是耽搁了我2个小时时间,坑啊!
相关推荐
和 $('#tg').treegrid('expandAll');会造成严重卡顿, 解决方案: 数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('load...
标题"SSH+Easyui之TreeGrid树形展现数据"表明我们要讨论的是如何在SSH框架下利用EasyUI的TreeGrid组件来展示层次结构的数据。TreeGrid是一种结合了表格和树形结构的组件,它可以在同一视图中展示数据的层级关系,这...
对于EasyUI TreeGrid来说,后端返回的数据通常需要按照特定的JSON格式进行组织,以便于前端能够正确地解析和展示数据。在描述中提到的关键点是将后端数据拼接成前端所需的JSON格式。这种格式通常需要包含如下的字段...
EasyUI TreeGrid是一款基于jQuery和EasyUI的数据展示组件,它结合了表格和树形结构的特点,使得数据在呈现时既能保持清晰的层次关系,又能进行数据的列式展示。在实际开发中,我们经常需要将普通的JSON数据转换为...
TreeGrid 是 EasyUI 中的一个重要组件,它结合了表格和树形结构的特点,适用于展示层次化数据。在本教程中,我们将深入探讨 jQuery EasyUI TreeGrid 的使用,包括增、删、改、查的基本操作。 首先,我们需要引入 ...
树形表格(TreeGrid)是EasyUI中的一个特色组件,它结合了表格和树状结构的特点,允许数据以层级方式展示,常用于组织结构、目录结构等场景。在实现无限层级菜单时,我们需要考虑如何动态加载子节点以及如何进行数据...
下载easyui后使用其中的css和js,从一个treegrid树形网格资源 往另一个空的树形网格拖放数据,支持添加子节点、删除、编辑、保存、取消编辑、刷新、更新数据等功能
EasyUI TreeGrid是一种基于JavaScript的数据展示控件,它结合了表格和树形结构的特点,适用于展示层次关系的数据。在这个场景中,我们将深入探讨EasyUI TreeGrid的使用方法和相关知识点。 首先,EasyUI TreeGrid是...
EasyUI 是一个基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和数据展示方式,包括表格、树形结构等。在 EasyUI 中,TreeGrid 是一个结合了 Tree 和 Grid 功能的组件,既能展示层级数据,又能进行多列数据的展示...
jquery easyui treegrid 拖拽demo
Easyui Treegrid是一款基于jQuery的UI库,用于创建具有树形结构的表格。它结合了表格和树的优点,使得数据展示既清晰又有层次感。在实际应用中,我们可能需要根据业务需求定制Treegrid的外观,包括改变其默认的图标...
EASYUI TreeGrid是一款基于jQuery和EASYUI框架的数据展示组件,它结合了表格和树形结构的特点,常用于展示层次关系的数据。在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高...
本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...
在TreeGrid中实现查询功能,可以让用户更加方便地从树形数据中找到特定节点。 首先,jQuery EasyUI 是一个基于jQuery的前端UI框架,它提供了一套界面组件,这些组件是通过编写jQuery插件实现的。TreeGrid组件是其中...
easyui treegrid 优化,包括 以新背景色标识鼠标所指行
jQuery Easyui Treegrid 是一个强大的数据展示组件,它结合了树形结构和表格的优点,常用于管理层次结构的数据。在实际应用中,我们经常需要添加复选框(checkbox)功能,以便用户可以多选操作。本文将详细介绍如何...
EasyUI的Treegrid扩展是一种对原生EasyUI TreeGrid组件的功能增强,主要目的是提供更加灵活的数据展示和操作方式。在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而...
easyui分页插件,分页插件传递查询参数,和返回之后执行的方法