网站机构树之EasyUi异步Tree实现

最新推荐文章于 2021-08-05 12:53:22 发布

shirandata

最新推荐文章于 2021-08-05 12:53:22 发布

阅读量242

点赞数

分类专栏： web后端开发

本文链接：https://blog.csdn.net/qq_34196115/article/details/79931534

版权

web后端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

默认加载第一层节点的前台代码，使用onBeforeExpand进行异步Ajax数据的加载：

<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="indexCommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>组织机构管理</title>
<script type="text/javascript">
$(function(){
var uid =-1;
$("#tree").tree({
lines:true,
url:'<%=basePath%>organTree/getOrganListByPid.do?parentId='+uid,
onLoadSuccess:function(){
//$("#tree").tree('expandAll');
},
onClick:function(node){
openTab(node)
},
onBeforeExpand: function (node, param) {
$(this).tree('options').url = "<%=basePath%>organTree/getOrganListByPid.do?parentId=" + node.id;
}
});

function openTab(node){
//新增节点校验此时还没有id
if(node.id == null){
$.messager.alert('系统提示','此节点不存在，请先保存！');
return false;
}
if($("#tabs").tabs("exists",node.text)){
$("#tabs").tabs("select",node.text);
}else{
//var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src=<%=basePath%>page/user/organtreeIndex.jsp></iframe>"
var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src=<%=basePath%>organTree/getOrganByOid.do?oid=" + node.id + "></iframe>"
$("#tabs").tabs("add",{
title:node.text,
iconCls:node.iconCls,
closable:true,
content:content
});
}
}
});
</script>
</head>
<%@include file="/page/user/loginCheckHead.jsp" %>
<body class="easyui-layout">
<div region="north" style="height: 0px;background-color: #E0ECFF;">
</div>
<div region="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="部门" data-options="iconCls:'icon-home'">
<div align="center" style="padding-top: 100px;"><font color="red" size="4">编辑内容</font></div>
</div>
</div>
</div>
<div region="west" style="width: 200px;padding: 5px;" title="组织机构" split="true">
<ul id="tree" class="easyui-tree"></ul>
</div>
</body>

</html>

后台代码实现(Controller层)：

/**
* 根据父节点id得到子节点集合
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping("/getOrganListByPid.do")
public String getOrganListByPid(HttpServletRequest request,HttpServletResponse response) throws Exception{
JSONObject result=new JSONObject();
String parentId = request.getParameter("parentId");
JSONArray jsonArray = organTreeServiceImpl.getAllOrganTreeByPid(parentId);
//System.err.println(jsonArray.toString());
ResponseUtil.write(response, jsonArray);
return null;

}

后台代码(Servicece层），这里有子节点的时候是closed，否则是open，由于之前将closed写成close不能异步加载，也是懵逼了半天：

public JSONArray getAllOrganTreeByPid(String parentId) {
JSONArray jsonArray = new JSONArray();
Map<String, Object> map = new HashMap<String, Object>();
map.put("parentId", parentId);
map.put("asc", "asc");
List<OrganTree> list = organTreeDao.findOrganTree(map);
for (OrganTree organTree : list) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", organTree.getOrganId());// 后台easyui专用
jsonObject.put("otId", organTree.getOrganId());
jsonObject.put("otName", organTree.getOrganName());
jsonObject.put("text", organTree.getOrganName());// 后台专用
if (hasChildren(organTree.getOrganId())) {
jsonObject.put("state", "closed");
} else {
jsonObject.put("state", "open");
}
// jsonObject.put("iconCls", auth.getIconCls());
JSONObject attributeObject = new JSONObject();
jsonArray.add(jsonObject);
}
return jsonArray;
}

shirandata

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站机构树之EasyUi异步Tree实现

默认加载第一层节点的前台代码，使用onBeforeExpand进行异步Ajax数据的加载：&lt;%@page import="java.io.PrintWriter"%&gt;&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt;&lt;%@include f
复制链接

扫一扫

专栏目录