jQuery MiniUI

标题: 请问如何记住 Tree 的缩放节点 [打印本页]

作者: wslfriend 时间: 2014-7-7 14:08:53 标题: 请问如何记住 Tree 的缩放节点

之前询问过贵方服务人员，

建议我：
如果要保存住展开的样子,必须把那些节点展开的保存起来
监听下treegrid的onexpand事件,展开的时候,把e.node节点对象保存到一个全局变量中,或者cookie,这个随便你们
然后监听treegrid的onload事件,刷新的时候,进入这个事件,设置下treegrid.expandNode(node)展开的节点.

随后我便拦截了  Expand /  Collapse  事件，记录下了相应ID。
  //展开折叠记录
      function onExpand(e) {
         var record = e.node;
         setCookie("Power.BusinessList." + "." + record.Id, "open");
         delCookie("Power.BusinessList." + "." + record.Id);  //删除cookie
      }
      //展开折叠记录
      function onCollapse(e) {
         var record = e.node;
         setCookie("Power.BusinessList." +  "." + record.Id, "close");
      }

但没有在 onLoad()中处理。  因为onLoad 中，我无法获取到所有需要缩起来的 id.

改为在
   function onDrawNode(e) {
         var node = e.node;
         var isClose = getCookie("Power.BusinessList." + "." + node.ModuleID);
               e.node.expanded =  !(isClose == "close");

}

但效果并不理想：
1.  缩起来符合预期，点击后立即记录到cookie ，屏幕上也立即缩起来了。
2.  展开则需要点击两次，第一次铁定没反应。
   究其原因，是展开时，先触发了  onDrawNode ，再触发了  onExpand ，以至第一次点击无效。

//-----------------------------------------------------------------------------------------------
如果要在  onLoad 中，缩起部分节点
则 onCollapse(e)  中，必须遍历整颗树，找到所有被缩的节点，存入  cookie ,再 onLoad 反解析，运行效率大打折扣

请问有没有更好的方案？

作者: factory 时间: 2014-7-7 15:04:25

你把行row的 id -> row 这样的key -> value结构
以便后续在对已经展开的节点重复展开的时候,处理重复存入的问题

可以试试监听onupdate事件,然后再for in 循环处理下好了

作者: wslfriend 时间: 2014-7-9 10:10:14

本帖最后由 wslfriend 于 2014-7-9 10:40 编辑

写是写出来了。 function onUpdate(e) {          var tree = e.sender;
         var value = getCookie("Power.BusinessList." + AssemblyID);
         if (!value) value = "";

         var keys = value.split(",");
         for (var iTmp = 0, len = keys.length; iTmp < len; iTmp++) {
            var node = tree.getNode(keys[iTmp])
            if (!node) continue;
            node.expanded = false;
            tree.updateNode(node, { expanded: false });
            tree.collapseNode(node);
         }
      }

缩放的效果也实现了，但还是未能符合预期效果。

1.  有滞后延迟    2. 滚动条偏动了。

//-------------------------------------------------------------------------------
主界面如下图：
[attach]4802[/attach]

为调节滚动条，最后触发了下算法
var otherHeight = parent.mini.get("layout1").getRegion("north").height + parent.mini.get("layout1").getRegion("south").height;
      treeBusinessList.setHeight(parent.document.getElementById('mainFrame').clientHeight - otherHeight);

里面有大量的超链接，会触发
mini.open({
            url: "
            onload: function () {
            },
            ondestroy: function (action) {
                  treeManage.LoadTreeList(null,EndLoad);    //刷新整棵树
            }
         });

现在的问题，就是因为树的缩展，  ondestroy 之后，经常会错位，极大的影响了体验效果。

作者: felt 时间: 2014-7-9 10:50:08

wslfriend 发表于 2014-7-9 10:10
写是写出来了。 function onUpdate(e) { var tree = e.sender;
var ...

mini.layout()可以用于调整miniui控件布局
你试一下用这个能不能调整

作者: wslfriend 时间: 2014-7-21 09:18:41

采用了如下方案

function onUpdate(e) {
         var tree = e.sender;
         var value = getCookie("Power.BusinessList." + AssemblyID);
         if (!value) value = "";

         var keys = value.split(",");
         for (var iTmp = 0, len = keys.length; iTmp < len; iTmp++) {
            var node = tree.getNode(keys[iTmp])
            if (!node) continue;
            node.expanded = false;
            tree.updateNode(node, { expanded: false });
            tree.collapseNode(node);
         }
      }
      //展开折叠记录
      function onExpand(e) {
         var record = e.node;

         TreeCookieValue = getCookie("Power.BusinessList." + AssemblyID);
         if (!TreeCookieValue) TreeCookieValue = "";
         TreeCookieValue = TreeCookieValue.replace(record.Id + ",", "");
         setCookie("Power.BusinessList." + AssemblyID, TreeCookieValue);
      }
      //展开折叠记录
      function onCollapse(e) {
         var record = e.node;
         TreeCookieValue = getCookie("Power.BusinessList." + AssemblyID);
         if (!TreeCookieValue) TreeCookieValue = "";
         if (TreeCookieValue.indexOf(record.Id + ",") < 0) TreeCookieValue = TreeCookieValue + record.Id + ",";
         setCookie("Power.BusinessList." + AssemblyID, TreeCookieValue);
      }

onCollapse/ onExpand  负责记录需要缩起来的ID 号  （所有ID 都是GUID唯一值)

onUpdate 负责显示。

效果是出来了，但有明显的滞纳感。

每次刷新，都是先出现一颗全部展开的树，然后再逐步缩起。体验效果不太敢恭维。

作者: felt 时间: 2014-7-21 09:36:53

wslfriend 发表于 2014-7-21 09:18
采用了如下方案

function onUpdate(e) {

onUpdate 你监听的是update事件吗，这个事件是树渲染完成之后才触发的
你试试onload

作者: wslfriend 时间: 2014-7-21 17:48:57

onload  事件不触发。

我这里是页面打开后，直接调用ajax ,返回一个数据包。

在 success: {} 中， treeGrid.loadData(result.aaa);  的方式赋值的。

<Div class="mini-treegrid"  onload="onLoad"  > 中的 var onLoad =function(e){}  怎么测都触发不到。

作者: felt 时间: 2014-7-21 21:18:18

wslfriend 发表于 2014-7-21 17:48
onload 事件不触发。

我这里是页面打开后，直接调用ajax ,返回一个数据包。

setData没有load事件，url加载的才有

作者: wslfriend 时间: 2014-7-22 08:33:35

是啊
现在就无解了

onLoad 不能用。 onUpdate 有严重滞后

onDraw 时机不对。

没一个法子能治根了。难不成，一定要把cookie 信息改存到服务端，由服务端拼好么？

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)