`

easyui treegrid 树形分页前台和后台

    博客分类:
  • js
阅读更多

     今天郁闷啊,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个小时时间,坑啊!

分享到:
评论

相关推荐

    解决 easyui treegrid 批量展开和关闭卡顿问题。

    和 $('#tg').treegrid('expandAll');会造成严重卡顿, 解决方案: 数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('load...

    SSH+Easyui之TreeGrid树形展现数据

    标题"SSH+Easyui之TreeGrid树形展现数据"表明我们要讨论的是如何在SSH框架下利用EasyUI的TreeGrid组件来展示层次结构的数据。TreeGrid是一种结合了表格和树形结构的组件,它可以在同一视图中展示数据的层级关系,这...

    MVC easyui treegrid后台绑定树

    对于EasyUI TreeGrid来说,后端返回的数据通常需要按照特定的JSON格式进行组织,以便于前端能够正确地解析和展示数据。在描述中提到的关键点是将后端数据拼接成前端所需的JSON格式。这种格式通常需要包含如下的字段...

    EasyUI treegrid json格式生成方法

    EasyUI TreeGrid是一款基于jQuery和EasyUI的数据展示组件,它结合了表格和树形结构的特点,使得数据在呈现时既能保持清晰的层次关系,又能进行数据的列式展示。在实际开发中,我们经常需要将普通的JSON数据转换为...

    jquery easyui treegrid demo 详解

    TreeGrid 是 EasyUI 中的一个重要组件,它结合了表格和树形结构的特点,适用于展示层次化数据。在本教程中,我们将深入探讨 jQuery EasyUI TreeGrid 的使用,包括增、删、改、查的基本操作。 首先,我们需要引入 ...

    easyUI-树形表格(TreeGrid)实现无限层级菜单

    树形表格(TreeGrid)是EasyUI中的一个特色组件,它结合了表格和树状结构的特点,允许数据以层级方式展示,常用于组织结构、目录结构等场景。在实现无限层级菜单时,我们需要考虑如何动态加载子节点以及如何进行数据...

    easyui从一个treegrid树形网格往另一个树形网格拖放数据

    下载easyui后使用其中的css和js,从一个treegrid树形网格资源 往另一个空的树形网格拖放数据,支持添加子节点、删除、编辑、保存、取消编辑、刷新、更新数据等功能

    数据结构之easyui-treegrid

    EasyUI TreeGrid是一种基于JavaScript的数据展示控件,它结合了表格和树形结构的特点,适用于展示层次关系的数据。在这个场景中,我们将深入探讨EasyUI TreeGrid的使用方法和相关知识点。 首先,EasyUI TreeGrid是...

    easyui-treegrid冻结右侧列插件.zip

    EasyUI 是一个基于 jQuery 的 UI 组件库,它提供了丰富的界面元素和数据展示方式,包括表格、树形结构等。在 EasyUI 中,TreeGrid 是一个结合了 Tree 和 Grid 功能的组件,既能展示层级数据,又能进行多列数据的展示...

    jquery easyui treegrid 拖拽demo

    jquery easyui treegrid 拖拽demo

    Easyui Treegrid改变默认图标的方法

    Easyui Treegrid是一款基于jQuery的UI库,用于创建具有树形结构的表格。它结合了表格和树的优点,使得数据展示既清晰又有层次感。在实际应用中,我们可能需要根据业务需求定制Treegrid的外观,包括改变其默认的图标...

    EASYUI TREEGRID异步加载数据实现方法

    EASYUI TreeGrid是一款基于jQuery和EASYUI框架的数据展示组件,它结合了表格和树形结构的特点,常用于展示层次关系的数据。在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高...

    EasyUI实现两个treegrid互相拖放

    本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...

    jQuery EasyUI的TreeGrid查询功能实现方法

    在TreeGrid中实现查询功能,可以让用户更加方便地从树形数据中找到特定节点。 首先,jQuery EasyUI 是一个基于jQuery的前端UI框架,它提供了一套界面组件,这些组件是通过编写jQuery插件实现的。TreeGrid组件是其中...

    EASYUI TREEGRID

    easyui treegrid 优化,包括 以新背景色标识鼠标所指行

    jQuery Easyui Treegrid实现显示checkbox功能

    jQuery Easyui Treegrid 是一个强大的数据展示组件,它结合了树形结构和表格的优点,常用于管理层次结构的数据。在实际应用中,我们经常需要添加复选框(checkbox)功能,以便用户可以多选操作。本文将详细介绍如何...

    easyui的Treegrid扩展

    EasyUI的Treegrid扩展是一种对原生EasyUI TreeGrid组件的功能增强,主要目的是提供更加灵活的数据展示和操作方式。在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而...

    easyui 分页插件

    easyui分页插件,分页插件传递查询参数,和返回之后执行的方法

Global site tag (gtag.js) - Google Analytics