【EasyUI篇】TreeGrid树表格组件-CFANZ编程社区

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

【EasyUI篇】TreeGrid树表格组件_TreeGrid

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

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

30.TreeGrid树表格组件

【EasyUI篇】TreeGrid树表格组件_TreeGrid_02

【EasyUI篇】TreeGrid树表格组件_List_03

【EasyUI篇】TreeGrid树表格组件_d3_04

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Tree</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/TreeGrid.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
    <script>

    </script>
</head>
<body style="padding: 100px;">

<%--class加载方式--%>
    <%--<table class="easyui-treegrid" style="width:380px; height: 200px;"
        data-options="url:'http://localhost:8081/easyui/getTreeGrid.action',
            idField:'id',treeField:'name' ">
        <thead>
            <tr>
                <th data-options="field:'name',width:180,">菜单名称</th>
                <th data-options="field:'date',width:180,">创建时间</th>
            </tr>
        </thead>

    </table>--%>
<%--Js加载方式--%>
<table id="box" style="width:380px;height:150px;"></table>
</body>
</html>

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<TreeGrid> getTreeGrid(){
        TreeGrid treeGrid1 = new TreeGrid();
        treeGrid1.setId(1);
        treeGrid1.setName("系统信息");
        treeGrid1.setDate(new Date());
        List<TreeGrid> 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<TreeGrid> lists2 = new ArrayList<>();
        TreeGrid treeGrid4 = new TreeGrid();
        treeGrid4.setId(1);
        treeGrid4.setName("认证审核");
        treeGrid4.setDate(new Date());
        lists2.add(treeGrid4);
        treeGrid3.setChildren(lists2);

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

}