【EasyUI篇】TreeGrid树表格组件
微信公众号：程序yuan
关注可获得更多干货哦！。问题或建议，请公众号留言;
------------------------------------------------
关注小编微信公众号获取更多资源
------------------------------------------------
查看--> 全套EasyUI示例目录
30.TreeGrid树表格组件
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;
}
}
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
------------------------------------------------