jQuery MiniUI
标题: 【分享JAVA】树结构 懒加载模式下 展开第二节点 [打印本页]
作者: yeqing4562011 时间: 2012-6-12 18:45:41 标题: 【分享JAVA】树结构 懒加载模式下 展开第二节点
【Java】
树结构 懒加载模式
【JSON数据格式】
大家都清楚,每次只加载一级节点,很明显因为一次性查询树的所有数据,如果树结构数据很多的话,树控件加载速度肯定会很慢。
如:
----Hosp
---Item1
----Jseon
----Tom
---Item2
JQuery MiniUI
懒加载模式
[attach]181[/attach]
其实加载的方式无论是什么,都是JSON数据结构的问题。
我们看下懒加载初次加载生成的JSON数据【注: 也是每次展开树结构时的数据[{}, {},]】:
[{
"id": "-1",
"text":"System",
"sort":0,
"pid":"0",
"lazy":"-1",
"isLeaf":false, //是否是叶子节点 false 就是下面还有子节点 则显示 小文件夹图片
"expanded":false, //是否展开
"url":null
从这里看,我们也许会想初次加载不就是要展开,expanded: true 就好了吗?
实际上你设置属性展开,需要显示下级节点数据,可是你没有数据,那么即使你设置了属性,也是没有用的。
下来我们看下首次加载后出现二级节点的JSON数据
图:
[attach]182[/attach]
数据
[{
"id":"-1",
"text":"System",
"sort":0,
"isLeaf":false,
"children":[{ //注意这里: children 子节点数据属性
"id":"base",
"text":"Base",
"sort":1,
"isLeaf":false,
"pid":"-1",
"lazy":"-1",
"expanded":false,
"url":null
},
{
"id":"model",
"text":"Model",
"sort":6,
"isLeaf":false,
"pid":"-1",
"lazy":"-1",
"expanded":false,
"url":""
}],
"pid":"0",
"lazy":"-1",
"expanded":true,
"url":null
从这里我们就可以看到初次懒加载的时候数据在拼接的时候,加上chidren属性和其数据就可以了。
下来我们看下后台是如何拼接的:
【后台JSON数据拼接】
数据表结构
Id varchar
Pid varchar
Name varchar
节点 ID 父节点 PID
- public void LoadNodes(HttpServletRequest request, HttpServletResponse response) throws Exception
- {
- //获取提交的数据
- String id = request.getParameter("id"); //每次展开树结构节点ID
- System.out.print(id);
- if(StringUtil.isNullOrEmpty(id)) id = "0"; //首次加载时request里试没有的,那么我们设置它初次加载的节点ID
- Map paramMap = new HashMap();
- paramMap.put("PID", id); //当前树节点的ID为父节点ID
- String treeJsonData = BaseMenu.getTreeJson(paramMap); //返回的JSON数据
- response.getWriter().write(treeJsonData);
- }
复制代码
【JAVA代码】
- public static String getTreeJson(Map paramMap) {
- String json = "";
- try {
-
- //paramMap 参数 PID
-
- /*
- * PluSoft.Utils.JSON.Encode(list)
- * 大家看这个方法传入的参数是 List
- * 返回的是String JSON数据格式
- * [{
- * id,
- * pid,
- * name
- * },{
- * ...
- * }]
- * 其实就是
- * [map1{}, map2{}]
- * List内放入的Map 就一个节点
- * */
-
- IBoBaseModel boBaseModel = (IBoBaseModel) BeansHelp
- .getBeanInstance("boBaseModel");
- //第一次查询我们可以获得一组数据
- //list [ Map1{id, pid, name}]
- //我们看到了吧
- List list = boBaseModel.getListBaseModel(paramMap);
-
- //首次加载处理方式
- for (int i = 0, l = list.size(); i < l; i++) {
- HashMap node = (HashMap) list.get(i);
- String nodeId = node.get("id").toString();
- HashMap pMap = new HashMap();
- pMap.put("PID", nodeId); //以当前节点作为此次查询的父节点
- List nodes = boBaseModel.getListBaseModel(pMap);
-
- //判断这个节点下是否还有子节点
- if (nodes.size() > 0) {
- node.put("isLeaf", false); // 则不是叶子节点
- node.put("expanded", false); //不展开
- }
-
- //在此处查询出第一个父节点下的数据
- //下面就一样了
- if(node.get("pid").equals("0")) {
- HashMap childMap = new HashMap();
- childMap.put("PID", "-1");
- List childNodes = boBaseModel.getListBaseModel(childMap);
- for(int j=0; j<childNodes.size(); j++) {
- HashMap childNode = (HashMap) childNodes.get(j);
- String cChildID = childNode.get("id").toString();
- HashMap cCMap = new HashMap();
- cCMap.put("PID", cChildID);
- List cChilds = boBaseModel.getListBaseModel(cCMap);
- if(cChilds.size() > 0) {
- childNode.put("isLeaf", false);
- childNode.put("expanded", false);
- }
- }
- node.put("children", childNodes); //children 就是第一个父节点下的子节点数据
- node.put("expanded", true);
- }
- }
-
-
-
- //此时的List是什么呢可以看下
- [{
- Map1{
- id,
- pid,
- text,
- //注意children 里放入的是List
- children: [{
-
- },{
-
- }]
- }
- }
- ]
- json = PluSoft.Utils.JSON.Encode(list);
- System.out.println(json);
- } catch (NoSuchBeanException e) {
- throw new ServiceLocatorException(e.getMessage(), e);
- } catch (DaoException e) {
- throw new ServiceLocatorException(e.getMessage(), e);
- }
- return json;
- }
复制代码
作者: niko 时间: 2012-6-13 08:53:41
很不错的分享。
其实后台只需要返回一个树形节点片段就可以了。
处理JSON的时候,先在后台生成java对象,然后用JSON序列化类一下子转换为JSON字符串。
作者: yeqing4562011 时间: 2012-6-13 09:21:31
niko 发表于 2012-6-13 08:53
很不错的分享。
其实后台只需要返回一个树形节点片段就可以了。
嗯 这个我也想过 如果单纯的树形节点判断 完全可以List Map自己拼接
但是这后期如果多个节点的话,拼接需要改变,这样写的好处我觉得,后期树是动态的,那么就可以省略再次修改代码了。
哎 问几个问题[attach]183[/attach]
作者: factory 时间: 2012-6-13 10:53:16
yeqing4562011 发表于 2012-6-13 09:21
嗯 这个我也想过 如果单纯的树形节点判断 完全可以List Map自己拼接
但是这后期如果多个节点的话,拼接 ...
1.你在代码上把west这个区域删除掉就可以了.
2.初次加载的时候,让这个节点默认选中,selectNode(node)
作者: yeqing4562011 时间: 2012-6-13 11:41:37
factory 发表于 2012-6-13 10:53
1.你在代码上把west这个区域删除掉就可以了.
2.初次加载的时候,让这个节点默认选中,selectNode(node) ...
有些小问题 我试下 System不行 别的都行 难道是Node传错了?
作者: yeqing4562011 时间: 2012-6-13 11:48:11
yeqing4562011 发表于 2012-6-13 11:41
有些小问题 我试下 System不行 别的都行 难道是Node传错了?
- window.onload = function(){
- var tree1 = firstTree.sender;
- firstTree.node.id = -1;
- tree1.selectNode(firstTree.node);
- alert("123");
- //执行通过了。 就这个System节点不会高亮 其他的都行
- }
- var firstTree = null;
- function onBeforeTreeLoad(e) {
- var tree = e.sender; // 树控件
- var node = e.node; // 当前节点
- var params = e.params; // 参数对象
- // 可以传递自定义的属性
- // params.myField = "123"; //后台:request对象获取"myField"
- firstTree = e;
- }
复制代码
作者: yeqing4562011 时间: 2012-6-13 11:50:52
yeqing4562011 发表于 2012-6-13 11:48
初次加载的JSON数据
[{
"id": "-1",
"text": "System",
"sort": 0,
"isLeaf": false,
"children": [{
"id": "base",
"text": "Base",
"sort": 1,
"isLeaf": false,
"pid": "-1",
"lazy": "-1",
"expanded": false,
"url": null
},
{
"id": "model",
"text": "Model",
"sort": 6,
"isLeaf": false,
"pid": "-1",
"lazy": "-1",
"expanded": false,
"url": ""
}],
"pid": "0",
"lazy": "-1",
"expanded": true,
"url": null
}]
作者: yeqing4562011 时间: 2012-6-13 11:55:29
yeqing4562011 发表于 2012-6-13 11:50
初次加载的JSON数据
[{
结贴!
完成了,原来是Node传的不对!
第一次加载时 我得到的Node不是System
我用getNode(value)这样获取了 System的Node
欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) |
Powered by Discuz! X2 |