JQuery easyUI Tree 一次性生成无限层结构树
实体类
public class NodeBo
{
private String id;
private String parentid;
private String parent;
private String text;
private String state; //(closed节点关闭,open节点打开)
private int checked;//(1为已选择,0为未选择)
private List<NodeBo> children = new ArrayList<NodeBo>();
get,set方法
}
Service层:
public synchronized List<NodeBo> queryFolDepts()
{
List<NodeBo> allNodes = new ArrayList<NodeBo>();
long startTime = System.currentTimeMillis();
//查询第一层级节点
List<NodeBo> nodes = ntpamFolDeptSettingDAO.queryFolDepts(null);
for(int index=0;index<nodes.size();index++)
{
NodeBo nodeBo = nodes.get(index);
allNodes.add(iteratorNodes(nodeBo));
}
long endTime = System.currentTimeMillis();
System.out.println((endTime-startTime)/1000+"秒");
return allNodes;
}
/**
* 递归遍历节点下的子节点
*@param nodeBo
*/
private NodeBo iteratorNodes(NodeBo nodeBo)
{
List<NodeBo> nodes = ntpamFolDeptSettingDAO.queryFolDepts(nodeBo.getId());
if(nodes.size()>0)
{
nodeBo.setChildren(nodes);
for(int index=0;index<nodes.size();index++)
{
NodeBo node = nodes.get(index);
iteratorNodes(node);
}
}
else
{
nodeBo.setState("open");
}
return nodeBo;
}
DAO层:
public List<NodeBo> queryFolDepts(String parentCode)
{
StringBuilder sql = new StringBuilder();
sql.append(" SELECT");
sql.append(" dept_code id,");
sql.append(" dept_name_zhs text,");
sql.append(" parent_dept_code parentid,");
sql.append(" DECODE(IS_CHECKED,'T','1','0') checked,");
sql.append(" 'closed' state");
sql.append(" FROM");
sql.append(" tcm_fol_dept");
sql.append(" WHERE");
sql.append(" enabled_flag = 'Y'");
Object[] obj = new Object[1];
if(StringUtils.isEmpty(parentCode))
{
sql.append(" AND parent_dept_code IS NULL ");
obj = null;
}
else
{
sql.append(" AND parent_dept_code = ?");
obj[0] = parentCode;
}
sql.append(" order by dept_code ");
return this.queryForBeanList(sql.toString(), obj, NodeBo.class);
}
页面HTML,JS
function initPromotionTree() {
var postUrl="ntpamFolDeptSettingJsonService/queryFolDepts.jssm?CommandName=queryFolDepts";
$("#menuTree").tree(
{
method: "post",
url: postUrl,
checkbox: true,
lines: true,
cascadeCheck: true,
onLoadSuccess: function(node, data)
{
},
onExpand: function(node)
{
if(node.checked){
$('#menuTree').tree('check', node.target);
}
}
});
}
<div class="easyui-panel" style="width:1000px;height:500px;padding:10px;">
<div class="easyui-layout" data-options="fit:true">
<div title="菜单" data-options="region:'center'" style="width:300px;padding:10px">
<ul id="menuTree" class="easyui-tree"></ul>
</div>
</div>
</div>
效果展示
我这一共有一万多条数据,从请求到页面加载大概50秒,当然也可以分步加载,这看个人业务了