使用userdata保持TreeView展开/折叠状态

用TreeView做了一個三層樹選單，一開始全部展開，頁面給拉得好長。現在要改成第一二層預設展開，第三層預設折疊。在網上沒找到好用的，就想到之前做過一個客戶端保持狀態的功能，然後就用JQuery+userdata實現了這個需求，具體代碼如下：

首先，在TreeView外面加個div標簽，便於JQuery篩選到這個TreeView

<div id="divTree">
    <asp:TreeView ID="tvLeftMenu" runat="server">
　　...

    </asp:TreeView>    　　

　　<script type="text/javascript">
        $(function() {
            var isClick = 1; //非初始化點擊
            var arrState = new Array();
            var dateNow = new Date();
            dateNow.setMinutes(dateNow.getMinutes() + 1); //展開狀態5分鐘之后過期
            var expiresTime = dateNow.toUTCString();
            var $imgFolder = $("#divTree img[alt]:gt(1)");
            var img0 = $imgFolder.length > 0 ? $imgFolder[0] : null;               

　　　　img0.addBehavior("#default#userdata");
            $imgFolder.each(function(i) {
                arrState[i] = 0;
                $(this).attr("id", i);
            }).click(function() {
                if (isClick == 0)
                    return;
                var idx = $(this).attr("id");
                if ($(this).attr("alt").indexOf("展開") == 0) { //展開時
                    arrState[idx] = 1;
                }
                else { //摺疊時
                    arrState[idx] = 0;
                }
                $(img0).attr('state', arrState.toString());
                img0.expires = expiresTime;//狀態過期後將恢復到預設狀態
                img0.save("TreeNodeState");
            });

            //初始化
            if (img0 != null) {
                img0.load("TreeNodeState");
                if ($(img0).attr('state') != undefined) {
                    var arrTmp = $(img0).attr('state').split(',');
                    if (arrTmp.length > 0) {
                        $imgFolder.each(function(i) {
                            if (arrTmp[i] == "1") {
                                isClick = 0;
                                $(this).click();
                                arrState[i] = 1;
                            }
                        });
                        isClick = 1;
                    }
                }
            }
        });
    </script>

</div>

 

(後來發現，Firefox不支持userdata，不過可以用sessionStorage取代它。但是問題又來了，在Firefox下，用javascript點擊“+”不會展開，沒找到解決辦法，最後就改用CallBack在後台保存Session來實現了。)

 

以下是經過改進的兼容IE和Firefox的一個類:

　　function ClientSession(obj, minute) {
                var isIE = document.all; 

                var dateNow = new Date();
                dateNow.setMinutes(dateNow.getMinutes() + minute);
                var expiresTime = dateNow.toUTCString();
                this.Set = function(key, value) {
                    if (isIE) {
                        obj.addBehavior("#default#userdata");
                        obj.setAttribute(key, value);
                        obj.expires = expiresTime;
                        obj.save("TreeNodeState");
                    }
                    else {
                        sessionStorage.setItem(key, value);
                    }
                }
                this.Get = function(key) {
                    if (isIE) {
                        obj.addBehavior("#default#userdata");
                        obj.load("TreeNodeState");
                        return obj.getAttribute(key);
                    }
                    else {
                        return sessionStorage.getItem(key);
                    }
                }
            }

　　<input type="hidden" id="hidState" value="" />

　　var clientSession = new ClientSession(hidState, 5);//實例化ClientSession

　　clientSession.Set('state', arrState.toString());//保存狀態

　　var strState = clientSession.Get('state');//讀取狀態