环境：Spring boot +Thymeleaf+jps+easyui
引入thymeleaf模板引擎
<html lang="en" xmlns:th="http://www.thymeleaf.org">Html页面引入easyui需要的文件
<head>
<meta charset="UTF-8">
<title>Basic Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/demo/demo.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>一、使用js创建组件
①、在easyui的layout中的center中定义一个table，id为“datagridTable”。
<div region="center" border="false">
<table id="datagridTable"></table>
</div>②、使用javascript的方式让这个table变为一个easyui的datagrid。当然也可以给这个table指定class属性为“easyui-datagrid”
<script type="text/javascript">
$(function() {
$("#datagridTable").datagrid({
url : 'getUsers',
title : '用户列表',
pagination : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40 ],
fit : true,//自适应窗口大小变化
fitColumns : true,
border : false,
idField : 'id',
columns : [ [ {
title : '用户编号',
field : 'id',
width : 100
//宽度必须，数值随便
}, {
title : '用户名',
field : 'username',
width : 100
}, {
title : '用户密码',
field : 'password',
width : 100
},{
title:'注册时间',
field:'date',
width:100
} ] ],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
}
}, '-', {
text : '编辑',
iconCls : 'icon-edit',
handler : function() {
}
} ]
//两个[],实现多级表头，合并单元格的效果，产生不规则表头
});
});二、使用easyUI创建组件的列子
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'/getUsers',method:'get'">
<thead>
<tr>
<th data-options="field:'id',width:80">Item ID</th>
<th data-options="field:'name',width:100">姓名</th>
<th data-options="field:'tel',width:80,align:'right'">电话</th>
</tr>
</thead>
</table>