Dynatree-樹控件基礎(chǔ)詳解

Dynatree樹控件基礎(chǔ)講解內(nèi)容1、dynatree簡介2、構(gòu)造dynatree3、操作dynatree4、常見問題及解決方案5、作業(yè)dynatree簡介Dynatree是一個(gè)jQuery插件，能夠?qū)崿F(xiàn)使用JavaScript動(dòng)態(tài)創(chuàng)建HtmlTree控件。主要特性：非常適用于創(chuàng)建擁有大量節(jié)點(diǎn)的樹形控件(DOM元素當(dāng)真正有需要的時(shí)候才會(huì)創(chuàng)建).主要特性：

非常適用于創(chuàng)建擁有大量節(jié)點(diǎn)的樹形控件(DOM元素當(dāng)真正有需要的時(shí)候才會(huì)創(chuàng)建).可編程提供一個(gè)面向?qū)ο蠼涌谥С滞ㄟ^Ajax實(shí)現(xiàn)樹節(jié)點(diǎn)懶加載支持為樹節(jié)點(diǎn)添加Checkboxes和層級(jí)選擇支持拖放操作（drag和drop）支持持久化保存支持鍵盤Keyboard操作可以從HTML代碼、JSON或JavaScript對(duì)象初化構(gòu)建樹構(gòu)造dynatree1、簡單構(gòu)造一棵樹2、相關(guān)屬性介紹3、服務(wù)器端數(shù)據(jù)傳遞4、樹對(duì)象常用方法介紹5、延時(shí)加載和一次性加載樹結(jié)構(gòu)原理簡單構(gòu)造一棵樹構(gòu)造一顆簡單樹需要的元素：1、頁面中有一個(gè)div在加載這可樹<divid="tree"> </div>2、導(dǎo)入四個(gè)js文件和一個(gè)css樣式3、要編寫$(“#tree”).dynatree({...});函數(shù)顯示相關(guān)屬性介紹Tips：isFolder和expand功能是相反的，但由于默認(rèn)值的緣故，要想初始化子節(jié)點(diǎn)是展開的，就必須要設(shè)置expand為true，isFolder默認(rèn)為false節(jié)點(diǎn)node具有兩種狀態(tài)：focus和activateTip：keyboard導(dǎo)航的是focus狀態(tài)，activate狀態(tài)不變，另外碰到noLink屬性項(xiàng)將無法導(dǎo)航服務(wù)器端數(shù)據(jù)傳遞1、傳值方式：AjaxinitAjax:{//樹的初始化函數(shù)

url:"/dynatree/department/nowTree",//urldata:{mode:“funnyMode”}//傳遞參數(shù)}2、數(shù)據(jù)形式：json{"title":"root","isFolder":true,"key":1,"expand":false,"children":[{"title":"child2","key":3},{"title":"child1","key":2,"children":[{"title":"grandchild","key":4}]}]}3、服務(wù)器端設(shè)置返回值為JSONimport

grails.converters.JSONrenderresultasJSON

（result要求是ArrayList類型）補(bǔ)充：1、grails中將String類型轉(zhuǎn)換為JSON類型：defjsonData=JSON.parse(resultStr)renderjsonDataasJSON2、java中要繼承ruixin-core.jar包中的 SimpleActionSupport類使用super.renderText(resultStr)方法發(fā)送數(shù)據(jù)FireBug中查看到的json數(shù)據(jù)樹中常見的方法還有一些響應(yīng)事件處理同js中是事件處理，如onDblClick，onKeydown，onFocus等等initAjax:{ url:"/dynatree/department/nowTree",data:{mode:"funnyMode"}},onSelect:function(select,node){varselNodes=node.tree.getSelectedNodes();varselKeys=$.map(selNodes,function(node){return"'"+node.data.title+"'";});$("#echoSelect").text(selKeys.join(","));},ajaxDefaults:{cache:true,dataType:"json"},strings:{loading:"Loading...",loadError:"Loaderror!"}應(yīng)用舉例：延時(shí)加載和一次性加載樹結(jié)構(gòu)原理：1、延遲加載就是initAjax函數(shù)只取有限的節(jié)點(diǎn)和子節(jié)點(diǎn)層數(shù)，當(dāng)需要時(shí)點(diǎn)擊再通過onLazyRead函數(shù)得到初次未加載的節(jié)點(diǎn)，優(yōu)點(diǎn)是當(dāng)樹比很大時(shí)，可以有效減少數(shù)據(jù)傳輸量2、一次性加載就是在initAjax時(shí)循環(huán)將所有節(jié)點(diǎn)得到并通過生成json數(shù)據(jù)將所有節(jié)點(diǎn)的json傳到頁面構(gòu)建完整的樹結(jié)構(gòu)，優(yōu)點(diǎn)是當(dāng)樹比較小的時(shí)候，可以減少ajax的次數(shù)Java及groovy后臺(tái)遞歸原理：1、通過數(shù)據(jù)庫查詢得到需要的數(shù)據(jù)，再使用StringBuffer循環(huán)遞歸拼接全部的json信息。2、通過sql多次查詢需要的數(shù)據(jù)，在拼接成字符串，可以減少遞歸，但不能減少循環(huán)次數(shù)。代碼見示例Tip：1、這里需要多次拼接字符串，請(qǐng)使用StringBuffer以減少系統(tǒng)開支2、拼接字符串時(shí)要小心，少任何半個(gè)括號(hào)或錯(cuò)任何標(biāo)點(diǎn)，都會(huì)導(dǎo)致json數(shù)據(jù)出錯(cuò)，頁面也將顯示不出樹。操作dynatree1、樹的數(shù)據(jù)結(jié)構(gòu)2、dynatree的方法3、對(duì)樹對(duì)象的操作4、對(duì)樹節(jié)點(diǎn)的操作樹的操作樹節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)

使用varnodes=$(“#tree”).dynatree(“getSelectedNodes”);得到被選中的節(jié)點(diǎn)。節(jié)點(diǎn)數(shù)據(jù)結(jié)構(gòu)：數(shù)據(jù)全部放在data屬性中，children屬性保存了其子節(jié)點(diǎn)的信息。附:cookie數(shù)據(jù)結(jié)構(gòu)通過tree.getPersistData()得到的cookie對(duì)象

包括數(shù)據(jù)：最近活動(dòng)的節(jié)點(diǎn)key值，最近獲得焦點(diǎn)的節(jié)點(diǎn)key值，selectedKeyList為最近被選中的節(jié)點(diǎn)key值集合。dynatree方法樹對(duì)象的操作樹節(jié)點(diǎn)的操作樹節(jié)點(diǎn)的操作樹節(jié)點(diǎn)的操作樹節(jié)點(diǎn)的操作常見問題及解決方案常見問題：1、正常加載后不顯示數(shù)據(jù)：（1）檢查json數(shù)據(jù)是否拼寫錯(cuò)誤，括號(hào)標(biāo)點(diǎn)（推薦使用firebug查看響應(yīng)信息）（2）頁面title標(biāo)簽是否為空，為空時(shí)會(huì)出現(xiàn)不顯示樹結(jié)構(gòu)的問題。2、不同版本的樹支持的方法不完全相同，如onPostInit在某些簡化版本中得不到支持3、如何讓節(jié)點(diǎn)初始化時(shí)被選中（1）使用onPostInit函數(shù)（2）在構(gòu)造樹json數(shù)據(jù)時(shí)判斷并添加“select”:true屬性4、關(guān)于樹的root，樹的實(shí)際根節(jié)點(diǎn)的key為_1,且目前我沒有修改的手段，顯示上有的顯示沒有根節(jié)點(diǎn)，其數(shù)據(jù)類型是以children:[]開頭，而如果要顯示根節(jié)點(diǎn)，則數(shù)據(jù)格式應(yīng)以{title:””,…}開始。5、initAjax函數(shù)和onLazyRead函數(shù)傳的參數(shù)均是以get方式傳遞，注意get方式傳參的長度限制，另外參數(shù)可以寫成data:{}方式傳遞，也可以直接加在url后面?zhèn)鬟f如url:“${base}/xtgl/yhgl/getSslTree?type=${type}&szxxqy=${szxxqy}&sslcids=${sslcids}”（這里的${XXX}為EL表達(dá)式）作業(yè)通過List信息構(gòu)造一顆樹//List數(shù)據(jù)privateList<List>getList(){List<List>list=newArrayList<List>();Listssl1=newArrayList();Listssl2=newArrayList();ssl1.add("安師大宿舍1#");//title屬性

ssl1.add("asd1#");//key屬性

ssl1.add(3);//children個(gè)數(shù)（樓層數(shù)） //表示為樓層1，樓層2，樓層3

ssl2.add("安師大北2#");//同上

s