网上很多示例都是用tree控件的各种事件去修改url参数实现的,这里介绍一种前端最简单的实现方法。
在前端不写任何多余的代码。前端代码非常简单,如下:
HTML和JS代码:
- <</span>ul
id="tt4"></</span>ul>
- $(function(){
-
$('#tt4').tree({ -
date:[{"id":1 , "text":"Folder1"}], -
url: '/egov/egs/prm/citizen-treedemo-ajax.action?id=' -
}); - });
第一次访问当然ID是空的,这时候判断ID为空就默认使用根节点查找,当然根节点的ID是多少一般是固定的。
以后再点击前台树(tree)的节点(node)时,展开文件夹的时候树控件,会自动将点击的ID传到后台,这个应该是easyui的tree默认的一个特性。
下面是后台代码,这里是JAVA实现:
-
- public
String treeDemoAjax() { -
// 获取ID -
String id = this.getString("id"); -
TreeNode treeNode = null; -
String treeJson = ""; -
// 如果是空,就默认根目录 -
if (StringUtils.isBlank(id)) { -
treeNode = new TreeNode("0", "模块根目录"); -
List treeChildren = queryAjaxTreeChildren(treeNode); -
treeNode.setChildren(treeChildren); -
treeJson = new JsonObject(treeNode).toString(); -
} else { -
// 加载子节点 -
treeNode = new TreeNode(id, ""); -
List treeChildren = queryAjaxTreeChildren(treeNode); -
treeJson = new JsonArray(treeChildren).toString(); -
if (!StringUtils.isBlank(treeJson) && treeJson.length() > 2) { -
treeJson = treeJson.substring(1); -
treeJson = treeJson.substring(0, treeJson.length() - 1); -
} -
} -
this.put("msg", "[" + treeJson + "]"); -
return Action.SUCCESS; - }
上面的queryAjaxTreeChildren
函数实现如下:
-
- private
List queryTreeChildren(TreeNode pNode) { -
List treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); -
List treeNodeList = new ArrayList(); -
if (treeData != null && treeData.size() > 0) { -
for (Hashtable ht : treeData) { -
String id = (String) ht.get("id"); -
String text = (String) ht.get("text"); -
TreeNode childNode = new TreeNode(id, text); -
treeNodeList.add(childNode); -
} -
} -
return treeNodeList; - }
-
-
- private
List queryAjaxTreeChildren(TreeNode pNode) { -
List treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); -
List treeNodeList = new ArrayList(); -
if (treeData != null && treeData.size() > 0) { -
for (Hashtable ht : treeData) { -
String id = (String) ht.get("id"); -
String text = (String) ht.get("text"); -
TreeNode childNode = new TreeNode(id, text); -
// 查询子节点的是否有子节点 -
List childNodeChildren = queryTreeChildren(childNode); -
if (childNodeChildren.size() > 0) { -
childNode.setState(TreeNode.STATE_CLOSED); -
} -
treeNodeList.add(childNode); -
} -
} -
return treeNodeList; - }
注意这里我们需要判断子节点是否还有子节点,因为这样我们才能判断在界面上是将节点显示成文件还是文件夹。
这里对easyui 树的节点JAVA代码封装模型TreeNode的代码看这里:http://luju.me/easyui/tree_for_javacode.html