jQuery MiniUI

 找回密码
 立即注册
查看: 4550|回复: 8
打印 上一主题 下一主题

请问如何记住 Tree 的缩放节点 [复制链接]

Rank: 4

跳转到指定楼层
楼主
发表于 2014-7-7 14:08:53 |只看该作者 |倒序浏览
之前询问过贵方服务人员,

建议我:
    如果要保存住展开的样子,必须把那些节点展开的保存起来
监听下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 反解析,运行效率大打折扣




请问有没有更好的方案?


Rank: 8Rank: 8

沙发
发表于 2014-7-7 15:04:25 |只看该作者
你把行row的 id -> row 这样的key  -> value结构
以便后续在对已经展开的节点重复展开的时候,处理重复存入的问题

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

Rank: 4

板凳
发表于 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. 滚动条偏动了。

//-------------------------------------------------------------------------------
主界面如下图:
   

为调节滚动条,最后触发了下算法
   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 之后,经常会错位,极大的影响 了体验效果。  




附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

地板
发表于 2014-7-9 10:50:08 |只看该作者
wslfriend 发表于 2014-7-9 10:10
写是写出来了。    function onUpdate(e) {            var tree = e.sender;            
            var ...

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

Rank: 4

5#
发表于 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 负责 显示。

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

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

Rank: 8Rank: 8

6#
发表于 2014-7-21 09:36:53 |只看该作者
wslfriend 发表于 2014-7-21 09:18
采用了如下方案

    function onUpdate(e) {

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

Rank: 4

7#
发表于 2014-7-21 17:48:57 |只看该作者
onload  事件不触发。

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

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

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

Rank: 8Rank: 8

8#
发表于 2014-7-21 21:18:18 |只看该作者
wslfriend 发表于 2014-7-21 17:48
onload  事件不触发。

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

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

Rank: 4

9#
发表于 2014-7-22 08:33:35 |只看该作者
是啊
现在就无解了

onLoad 不能用。  onUpdate 有严重滞后

onDraw 时机不对。

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

Archiver|普加软件

GMT+8, 2025-7-10 10:04 , Processed in 1.040986 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部