导入easyUi的工具包
在jsp页面引入
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.easyui-accordion ul
{
list-style-type: none;
margin: 0px;
padding: 10px;
}
.easyui-accordion ul li
{
padding: 0px;
}
.easyui-accordion ul li a
{
line-height: 24px;
}
.easyui-accordion ul li div
{
margin: 2px 0px;
padding-left: 10px;
padding-top: 2px;
}
.easyui-accordion ul li div.hover
{
border: 1px dashed #99BBE8;
background: #E0ECFF;
cursor: pointer;
}
.easyui-accordion ul li div.hover a
{
color: #416AA3;
}
.easyui-accordion ul li div.selected
{
border: 1px solid #99BBE8;
background: #E0ECFF;
cursor: default;
}
.easyui-accordion ul li div.selected a
{
color: #416AA3;
font-weight: bold;
}
</style>
jsp页面的引用
<table title="Folder Browser" class="easyui-treegrid" style="width:auto; height:400px"
data-options="
url: '<%=request.getContextPath() %>/classify/findClassifyList1.do',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
animate: true,
showFooter:true
">
<thead>
<tr>
<th data-options="field:'name'" width="220">名称</th>
<th data-options="field:'sort'" width="220" align="right">排序</th>
<th data-options="field:'caozuo'" width="220" align="right">操作</th>
</tr>
</thead>
</table>
后台数据处理
实体javabean
public class Classify {
//分类id
private int id;
//上级分类id
private int pid;
//分类名称
private String name;
//排序
private int sort;
//层级关系
private int level;
//每个节点下面的所有子节点的总数
private int childrenCount;
//所有子节点的id
private String childrenId;
private String caozuo;
private String state;
public String getCaozuo() {
return caozuo;
}
public void setCaozuo(String caozuo) {
this.caozuo = caozuo;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getSort() {
return sort;
}
public void setSort(int sort) {
this.sort = sort;
}
public int getLevel() {
return level;
}
public void setLevel(int level) {
this.level = level;
}
public int getChildrenCount() {
return childrenCount;
}
public void setChildrenCount(int childrenCount) {
this.childrenCount = childrenCount;
}
public String getChildrenId() {
return childrenId;
}
public void setChildrenId(String childrenId) {
this.childrenId = childrenId;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
后台数据处理
@RequestMapping("/classify/findClassifyList1.do")
public void findClassifyList1(Classify classify,HttpServletResponse response,HttpServletRequest request) throws IOException{
String id = request.getParameter("id");
if(id==null){
id="0";
}
List<Classify> classifyList=classifyService.getTreeClassifyList(Integer.parseInt(id));
List<Classify> classifyList2 = classifyService.getAllTreeClassifyList();
for (Classify classify2 : classifyList) {
String state = "open";
if (hasChildNode2(classifyList2, classify2.getId())) {
state = "closed";
}
classify2.setState(state);
classify2.setCaozuo("[<a href='javascript:;' οnclick='deleteClassifyById("+classify2.getId()+")' class='delete' val='78'>删除</a>]/[<a href='../classify/findClassifyById.do?id="+classify2.getId()+"'>编辑</a>]");
}
JSONArray a =JSONArray.fromObject(classifyList);
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(a);
out.flush();
}
private boolean hasChildNode2(List<Classify> menuAllList, int menuId) {
for (Classify menu : menuAllList) {
if (menu.getPid() == menuId) {
return true;
}
}
return false;
}
实现效果