【EasyUI篇】TreeGrid树表格组件

微信公众号:程序yuan
关注可获得更多干货哦!。问题或建议,请公众号留言;

------------------------------------------------

关注小编微信公众号获取更多资源

------------------------------------------------

查看--> 全套EasyUI示例目录

 

30.TreeGrid树表格组件

 【EasyUI篇】TreeGrid树表格组件_第1张图片

【EasyUI篇】TreeGrid树表格组件_第2张图片

 

【EasyUI篇】TreeGrid树表格组件_第3张图片

 

 

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Tree
    
    
    
    
    
    
    
    
    
    



<%--class加载方式--%>
    <%--
        
            
                菜单名称
                创建时间
            
        

    --%>
<%--Js加载方式--%>



JS文件

$(function () {

    $("#box").treegrid({
        url:'http://localhost:8081/easyui/getTreeGrid.action' ,
        idField:'id',
        treeField:'name',
        columns:[
            [
                {
                    title : '菜单名称',
                    field : 'name',
                    width : 180,
                },
                {
                    title : '创建时间',
                    field : 'date',
                    width : 180,
                }
            ]
        ],

    });

});

Contro文件

package com.ooyhao.controller;

import com.ooyhao.pojo.TreeGrid;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * @author ooyhao
 */
@Controller
public class TreeGridController {


    @RequestMapping(value = "getTreeGrid")
    @ResponseBody
    public List getTreeGrid(){
        TreeGrid treeGrid1 = new TreeGrid();
        treeGrid1.setId(1);
        treeGrid1.setName("系统信息");
        treeGrid1.setDate(new Date());
        List lists1 = new ArrayList<>();
        TreeGrid treeGrid2 = new TreeGrid();
        treeGrid2.setId(1);
        treeGrid2.setName("主机信息");
        treeGrid2.setDate(new Date());
        lists1.add(treeGrid2);
        treeGrid1.setChildren(lists1);

        TreeGrid treeGrid3 = new TreeGrid();
        treeGrid3.setId(1);
        treeGrid3.setName("会员信息");
        treeGrid3.setDate(new Date());

        List lists2 = new ArrayList<>();
        TreeGrid treeGrid4 = new TreeGrid();
        treeGrid4.setId(1);
        treeGrid4.setName("认证审核");
        treeGrid4.setDate(new Date());
        lists2.add(treeGrid4);
        treeGrid3.setChildren(lists2);

        List treeGrids = new ArrayList<>();
        treeGrids.add(treeGrid1);
        treeGrids.add(treeGrid3);
        return treeGrids;
    }

}

效果图

【EasyUI篇】TreeGrid树表格组件_第4张图片

------------------------------------------------

关注小编微信公众号获取更多资源

------------------------------------------------

 

你可能感兴趣的:(前端框架EasyUI)