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

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

grails.converters.JSONrenderresultasJSON

（result要求是ArrayList類型）補充：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ù)樹中常見的方法還有一些響應事件處理同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!"}應用舉例：延時加載和一次性加載樹結(jié)構(gòu)原理：1、延遲加載就是initAjax函數(shù)只取有限的節(jié)點和子節(jié)點層數(shù)，當需要時點擊再通過onLazyRead函數(shù)得到初次未加載的節(jié)點，優(yōu)點是當樹比很大時，可以有效減少數(shù)據(jù)傳輸量2、一次性加載就是在initAjax時循環(huán)將所有節(jié)點得到并通過生成json數(shù)據(jù)將所有節(jié)點的json傳到頁面構(gòu)建完整的樹結(jié)構(gòu)，優(yōu)點是當樹比較小的時候，可以減少ajax的次數(shù)Java及groovy后臺遞歸原理：1、通過數(shù)據(jù)庫查詢得到需要的數(shù)據(jù)，再使用StringBuffer循環(huán)遞歸拼接全部的json信息。2、通過sql多次查詢需要的數(shù)據(jù)，在拼接成字符串，可以減少遞歸，但不能減少循環(huán)次數(shù)。代碼見示例Tip：1、這里需要多次拼接字符串，請使用StringBuffer以減少系統(tǒng)開支2、拼接字符串時要小心，少任何半個括號或錯任何標點，都會導致json數(shù)據(jù)出錯，頁面也將顯示不出樹。操作dynatree1、樹的數(shù)據(jù)結(jié)構(gòu)2、dynatree的方法3、對樹對象的操作4、對樹節(jié)點的操作樹的操作樹節(jié)點的數(shù)據(jù)結(jié)構(gòu)

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

包括數(shù)據(jù)：最近活動的節(jié)點key值，最近獲得焦點的節(jié)點key值，selectedKeyList為最近被選中的節(jié)點key值集合。dynatree方法樹對象的操作樹節(jié)點的操作樹節(jié)點的操作樹節(jié)點的操作樹節(jié)點的操作常見問題及解決方案常見問題：1、正常加載后不顯示數(shù)據(jù)：（1）檢查json數(shù)據(jù)是否拼寫錯誤，括號標點（推薦使用firebug查看響應信息）（2）頁面title標簽是否為空，為空時會出現(xiàn)不顯示樹結(jié)構(gòu)的問題。2、不同版本的樹支持的方法不完全相同，如onPostInit在某些簡化版本中得不到支持3、如何讓節(jié)點初始化時被選中（1）使用onPostInit函數(shù)（2）在構(gòu)造樹json數(shù)據(jù)時判斷并添加“select”:true屬性4、關于樹的root，樹的實際根節(jié)點的key為_1,且目前我沒有修改的手段，顯示上有的顯示沒有根節(jié)點，其數(shù)據(jù)類型是以children:[]開頭，而如果要顯示根節(jié)點，則數(shù)據(jù)格式應以{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表達式）作業(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個數(shù)（樓層數(shù)） //表示為樓層1，樓層2，樓層3

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

s