欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript-TreeView父子聯(lián)動效果保持節(jié)點狀態(tài)一致

 更新時間:2007年08月12日 15:58:44   作者:  
我們大部分都用過TreeView控件,對這個控件的評價也是各式各樣的,但是我覺得不論如何它是一個免費的開源的控件,所以我還是在用它。在剛接觸ASP.NET的時候,記得需要做一個分配權限的權限樹,當時只知道有這個樹,經(jīng)過一天的研究對其服務器端的行為基本以及搞清楚了,但是由于當時的js水平有限,所以對客戶端的代碼很畏懼,基本沒有看過。
當時有這樣一個要求:如果一個節(jié)點被選中則該節(jié)點的所有子節(jié)點都要選中,如果該節(jié)點的所有子節(jié)點取消選擇則該節(jié)點也要取消選擇(節(jié)點一致性),相反一樣。
還有一個要求就是:如果可以實現(xiàn)三態(tài)樹則更好(這個有點難,本文中不予討論)。本文將詳細介紹前面要求1。
        首先我們要慶幸微軟的這個TreeView控件是開源的,不論是客戶端代碼還是服務器端代碼您都可以輕松獲得,可以去微軟的網(wǎng)站上下載。在網(wǎng)上也見過一些講述該問題的文章,他們大多是使用一個TreeView之外的js實現(xiàn),我個人認為從面向對象的觀點,該功能屬于TreeView,所以沒有理由將它分離出去,因此今天我將修改TreeView.htc來實現(xiàn)上面的功能。要想獲得該文件(TreeView.htc)可以去微軟的網(wǎng)站上下載之。
說實在的該功能曾經(jīng)也困擾了我很久,一直想解決這個問題,但是一直沒有時間來研究TreeView.htc中的代碼,今天終于下決心搞定它。
        我們知道在TreeView的oncheck中需要激發(fā)該事件處理函數(shù),這個函數(shù)很容易找到,可以在TreeView生成的客戶度腳本中找到,代碼片斷如下:
oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)"
        由此我們可以去htc(以后說的htc都指的是TreeView.htc),找到doCheckboxClick方法,只要看名字就知道它是干什么的(命名實在太重要了,否則在3000行代碼中找某個函數(shù)真的很累)。
        該方法是當用戶點擊CheckBox的使用要處理的函數(shù),函數(shù)如下所示:
        function doCheckboxClick(el){
            var checked = private_getAttribute(el,"checked")
            el.checked = !checked;
            var evt = createEventObject();
            evt.treeNodeIndex = getNodeIndex(el);
            g_nodeClicked = el;
            _tvevtCheck.fire(evt);
            setNodeState(el,el.checked);// maybe need el only,but I think it's safly
        }
        其中第一行、第二行以及最后一行是我添加的,第一二行是為了在頁面回傳以后checked屬性無效時所做的修改,按照原來的方法在提交后el.checked是undefined,所以導致無法正確同步節(jié)點,如果讀者有興趣可以試一試。setNodeState函數(shù),從名字上可以看出該函數(shù)是用來設置節(jié)點狀態(tài)的,它將當前你選擇的節(jié)點作為參數(shù)傳遞到函數(shù)內(nèi)部。如注釋中所說實際上你可以只傳遞el進去,而無需再傳一個布爾值,不過我想這樣傳遞可能更安全,不過沒有關系,你覺得不爽可以修改:。
        下面看看setNodeState的函數(shù)體,該函數(shù)由兩個方法組成,一個是設置所有孩子節(jié)點的狀態(tài),一個是設置該節(jié)點的父節(jié)點狀態(tài)。代碼如下:
        function  setNodeState(el,state){
            _setChildNode(el,state);
            _setParentNode(el,state);
        }
        為了可以設置當前節(jié)點的所有孩子節(jié)點是否和父節(jié)點(本節(jié)點)狀態(tài)一至我們需要函數(shù)_setChildNode,同理為了使節(jié)點的父節(jié)點和該節(jié)點狀態(tài)一至我們需要_setParentNode函數(shù)。兩個函數(shù)都是遞歸函數(shù),將會遍歷所有的子節(jié)點和所有的父節(jié)點以及兄弟節(jié)點(為什么要遍歷兄弟節(jié)點稍候再說),下面我們先看看遍歷孩子節(jié)點的代碼,代碼如下所示:
        function  _setChildNode(el,state){
            var childNodes = el.children;
            if(childNodes.length > 0){// if has childs 
                for(var i = 0 ;i<=childNodes.length-1;i++){
                    private_setAttribute(childNodes[i],"Checked",state);
                    _saveCheckState(childNodes[i]);
                    _setChildNode(childNodes[i],state);
                }
            }
        }
        該函數(shù)先獲得當前節(jié)點的所有子節(jié)點,這里可以直接使用TreeView提供的函數(shù)getChildren方法,而我使用的使html的原始方法。如果該節(jié)點存在子節(jié)點則遍歷所有子節(jié)點,同時設置子節(jié)點的狀態(tài)和當前節(jié)點的狀態(tài)一致,_saveCheckState函數(shù)的作用稍候會介紹。private_setAttribute方法為TreeView提供的一個內(nèi)部設置屬性的方法(js沒有private關鍵字,這里只是做說明而已),該方法將設置每一個節(jié)點的Checked屬性為當前這個節(jié)點的狀態(tài)。
        下面是如何設置父節(jié)點狀態(tài)的代碼:
         function  _setParentNode(el,state){
            var parentNode = el.parentElement;
            if(parentNode){
                if(!_checkSiblingdNode(el)){
                    private_setAttribute(parentNode,"Checked",state);
                    _saveCheckState(parentNode);
                    _setParentNode(parentNode,state);
                }
            }
        }
        該函數(shù)先獲得其父節(jié)點,如果父節(jié)點存在則檢查當前節(jié)點的兄弟節(jié)點,上面有提到了需要檢查兄弟節(jié)點,這里檢查兄弟節(jié)點的目的是:父節(jié)點的狀態(tài)不是由當前節(jié)點一個節(jié)點控制的(這種情況只存在于當前節(jié)點沒有兄弟節(jié)點的情況下),如果有其他兄弟是選中的,那么父節(jié)點是不能被取消了,這樣將導致兄弟節(jié)點和父子節(jié)點不一致不一致。該函數(shù)里面也調(diào)用了_saveCheckState函數(shù),在后面將介紹之。
下面的代碼描述了如何檢查兄弟節(jié)點的狀態(tài),代碼如下:
        function _checkSiblingdNode(el){
            var parentNode = el.parentElement;// you can use getParentTreeNode function in this htc,but I like this usage.
            for(var i = 0;i<=parentNode.children.length-1;i++){
                if(el != parentNode.children[i]){
                    if(private_getAttribute(parentNode.children[i],"Checked")){
                        return true;
                    }
                }
            }
            return false;
        }
        正如注釋所述,你可以使用getParentTreeNode方法來獲得節(jié)點的父節(jié)點,但是我比較喜歡使用原始的方法:。這里將排除自己(if(el!=parentNode.children[i]))。
        有了上面的代碼我們就可以做到客戶端無刷新的父子節(jié)點一致的選擇,那么我們現(xiàn)在來介紹一下_saveCheckState函數(shù),如果沒有該函數(shù)頁面提交以后,剛才除了手工點擊的節(jié)點以外其他的節(jié)點都不能保存狀態(tài)。所以該函數(shù)的作用就是要保存所有節(jié)點的狀態(tài)(主要是自動選擇的節(jié)點),保證在回傳之后樹的狀態(tài)依然存在。下面的代碼描述了_saveCheckState函數(shù),代碼如下:
        function _saveCheckState(el){
            if(getNodeIndex(el))
                queueEvent('oncheck', getNodeIndex(el));
        }
        該方法首先檢查當前節(jié)點的index是否有效,如果有效則保存狀態(tài)。這里需要說一下queueEvent方法做了什么,代碼我就不帖了,該函數(shù)的實際意義是將客戶端的操作保存在一個名為__TreeView1_State__的隱藏域中,這樣在回傳的時候服務器端會根據(jù)該隱藏域,初始化樹的狀態(tài)。其中TreeView1是我在測試系統(tǒng)中TreeView的名字。
        最后的問題就是部署的問題了,因為修改了htc,所以在部署的時候需要替換原來的htc文件。
        如果有需要修改之后的TreeView.htc(格式化之后的),可以在CSDN上改我留言留下email。我的CSDN帳號是cuike519。
        希望微軟可以早日將這個功能添加到TreeView控件中,最好也能實現(xiàn)多態(tài)的樹結構。請瀏覽blog的相關評論,我會在評論中更新文章!

相關文章

  • Openlayers實現(xiàn)距離面積測量

    Openlayers實現(xiàn)距離面積測量

    這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)距離面積測量,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JS數(shù)字抽獎游戲實現(xiàn)方法

    JS數(shù)字抽獎游戲實現(xiàn)方法

    這篇文章主要介紹了JS數(shù)字抽獎游戲實現(xiàn)方法,可實現(xiàn)按下回車鍵出現(xiàn)隨機數(shù)字切換的效果,涉及時間與隨機數(shù)的相關操作技巧,非常具有實用價值,需要的朋友可以參考下
    2015-05-05
  • easyui form validate總是返回false的原因及解決方法

    easyui form validate總是返回false的原因及解決方法

    下面小編就為大家?guī)硪黄猠asyui form validate總是返回false的原因及解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • JS+CSS繪制棋盤格的示例代碼

    JS+CSS繪制棋盤格的示例代碼

    在這篇文章中,將為大家展示如何使用css Flex-box和一些JavaScript來設計棋盤。文中的示例代碼講解詳細,感興趣的可以了解一下
    2022-05-05
  • 用js實現(xiàn)隨機返回數(shù)組的一個元素

    用js實現(xiàn)隨機返回數(shù)組的一個元素

    js實現(xiàn)隨機返回數(shù)組的一個元素,這是個奇妙的方法。適合做標題性質(zhì)文字的隨機輪換顯示
    2007-08-08
  • JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例

    JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例

    這篇文章主要介紹了JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • JavaScript深入介紹WebAPI的用法

    JavaScript深入介紹WebAPI的用法

    JS分成三個大的部分:ECMAScript、DOM API、BOM API,其中:ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個更加復雜的有交互式的頁面,還需要WebAPI的支持,相當于把后端編程實現(xiàn)成前端交互。DOM+BOM就組成了WebAPI
    2022-06-06
  • 第九篇Bootstrap導航菜單創(chuàng)建步驟詳解

    第九篇Bootstrap導航菜單創(chuàng)建步驟詳解

    這篇文章主要介紹了Bootstrap導航菜單創(chuàng)建步驟詳解的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 微信小程序 setData 對 data數(shù)據(jù)影響問題

    微信小程序 setData 對 data數(shù)據(jù)影響問題

    這篇文章主要介紹了微信小程序 setData 對 data數(shù)據(jù)影響的 一點研究,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 微信小程序實現(xiàn)滾動Tab選項卡

    微信小程序實現(xiàn)滾動Tab選項卡

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滾動Tab選項卡,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11

最新評論