jQuery easyUI树形表格(TreeGrid)的实现

jQuery easyUI树形表格(TreeGrid)的简单实现

网上只写了页面中实现的效果,数据固定,数据是json文件解决。下面我写了一个从后台模拟数据,在页面显示的效果demo,不足之处望指正!!!

效果图如下:只截取了部分
jQuery easyUI树形表格(TreeGrid)的实现_第1张图片

页面HTML标签:

<table id="tt">table>  

页面js代码:

$('#tt').treegrid({    
    url:'${ctx }/account/treegrid.do',  
    title: 'TreeGrid',
    iconCls: 'icon-save',
    singleSelect:true,
    idField:'id',  //关键字段来标识树节点,不能重复  
    treeField:'name',  //树节点字段,也就是树节点的名称
    fitColumns:true,
    rownumbers:true,//显示一个行号列
    collapsible:true,//收起表格的内容
    width: 700,
    height: 450,
    loadMsg: '数据加载中...',
    animate:true,//在节点展开或折叠的时候是否显示动画效果
    lines:true,//显示treegrid行
    columns:[[    
        {field:'name',title:'第一列',width:100,align:'left'},    
        {field:'size',title:'第二列',width:60,align:'center'},    
        {field:'date',title:'第三列',width:80,align:'center'}  
    ]],
    onLoadSuccess:function(data){
        $('#tt').treegrid('expandAll');//全部展开树节点
    }
});

后台代码,模拟一些数据;数据格式:[{“id”:1,”name”:154,”children”:[{“id”:2,”name”:155}]}],children代表子节点中的数据,id是唯一的,否则easyUI解析的时候会出现错误。”state”:”closed”,数据中如果有这个属性的值就代表子节点是折叠的,效果如下:

jQuery easyUI树形表格(TreeGrid)的实现_第2张图片
其他节点展开,它及其它的子节点是折叠的效果。


public static int j = 0;//成员变量,创建唯一的id值

@RequestMapping("/treegrid.do")
    @ResponseBody
    public DataGrid treeGrid() throws Exception{
        j=0;

        //所有的数据集合
        List<Map<String, Object>> results = new ArrayList<Map<String,Object>>();
        DataGrid dg = new DataGrid();
        //模拟的几条数据
        results = createTreeGridChildren(14);

        //返回到页面的数据集合
        dg.setRows(results);
        dg.setTotal(j+1);

        return dg;
    }

    /** 
     * 递归设置树 
     * @param list 
     * @param id 
     * @return 
     */  

    //n代表树结构层数
    private static List<Map<String, Object>> createTreeGridChildren(int n) { 
        List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();  
        Map<String, Object> map = null;  

        if(n==1){
             map = new HashMap<String, Object>();  
                //在页面easyUI插件treeGrid提供了数据转换的columns属性,具体看相关的js代码  
                map.put("id", j+1);
                map.put("size", j+1);  
                map.put("name", "历史");
                map.put("date", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(System.currentTimeMillis()))); 
                if (map != null)  
                    childList.add(map); 
                return childList;  
        }else{
            j++;
            map = new HashMap<String, Object>();  
            map.put("id", j);
            map.put("size", j);  
            map.put("name", "张三");
            map.put("date", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(System.currentTimeMillis()))); 
            map.put("children", createTreeGridChildren(n-1));  

            childList.add(map); 
            return childList;  
        }
    }

DataGrid 实体类,提供一些get,set方法。用到的属性是结果集:rows,总记录数:total

package util;

import java.util.List;
import java.util.Map;

public class DataGrid {

    private int page = 1 ;// 当前页
    private List> rows;// 结果集
    private int pageSize = 10;//每页显示的数据的条数
    private int total;// 总记录数


    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public List> getRows() {
        return rows;
    }
    public void setRows(List> rows) {
        this.rows = rows;
    }
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }

}

你可能感兴趣的:(前端技术)