jsTree插件簡介(三)

UI-plugin

JSTree的UI插件：用來處理選擇、不選和滑鼠懸浮樹選項的插件。

一、屬性包括：

1、select_limit：指定一次可以選中幾個節點，預設為-1，表示無限制選中。

2、select_multiple_modifier：處理當按住某個鍵時，用滑鼠點選其他的節點可全部選中；(類似在檔案目錄中的按住ctrl并用滑鼠選擇其它目錄或者檔案)；預設按鍵為"ctrl"，可以用"shift"，"alt"等替代。

3、select_range_modifier：先選中一個節點，然後按住某個鍵位，再用滑鼠點選另外一個節點，這樣就選中這兩個節點之間的部分并包含這兩個節點，類似于windows中選中檔案系統中的"shift"，預設選項為"shift"，可用"ctrl", "alt"等代替。

注意：使用這個選項選中的必須為兄弟節點。

4、select_parent_close：當選中節點的父節點關閉時是否選中父節點。若為"select_parent"則關閉父節點時選中父節點，若為"false"和"deselect"則當父節點關閉時不選中父節點。預設為"select_parent"。

5、select_parent_open：當程式運作過程中選中了一個節點并且這個節點的節點全是關閉的，這時要自動打開關閉的父節點。預設為"true"

6、select_prev_on_delete：當删除一個節點時預設選擇前一個兄弟節點，若沒有前一個兄弟節點，則選擇父節點。預設為"true"

7、disable_selecting_children：預設為"false"，如果設定為"true"，你将無法選擇這個節點的子節點。(待驗證)

8、initially_select：當樹完成加載時預設選中的節點，它需要節點的id值來辨別。

貼一段官方的代碼

[html] view plain copy

1. <div class="panel">  
2. <h3>Using the UI plugin</h3>  
3. <div id="demo1" class="demo">  
4.     <ul>  
5.         <li id="phtml_1">  
6.             <a href="#">Root node 1</a>  
7.             <ul>  
8.                 <li id="phtml_2">  
9.                     <a href="#">Child node 1</a>  
10.                 </li>  
11.                 <li id="phtml_3">  
12.                     <a href="#">Child node 2</a>  
14.             </ul>  
15.         </li>  
16.         <li id="phtml_4">  
17.             <a href="#">Root node 2</a>  
19.     </ul>  
20. </div>  
21. <script type="text/javascript" class="source">  
22. $(function () {  
23.     $("#demo1").jstree({   
24.         "ui" : {  
25.             "select_limit" : 2,  
26.             "select_multiple_modifier" : "ctrl",  
27.             "selected_parent_close" : "select_parent",  
28.             "initially_select" : [ "phtml_2" ]  
29.         },  
30.         "core" : { "initially_open" : [ "phtml_1" ] },  
31.         "plugins" : [ "themes", "html_data", "ui" ]  
32.     });  
33. });  
34. </script>  

二、函數包括：

1、._get_node(node, allow_multiple)：覆寫了core元件的get_node函數。

如果node為null或者沒有定義，并且allow_multiple為true，傳回所有現在被選中的節點；

如果node為null或者沒有定義，并且allow_multiple不為true，傳回最後被選中的節點。

node：混合類型，可以為Dom node，jQuery node或指向元素在書中的選擇點。

allow_multiple：是否傳回所有節點或者node為null時最後一個被選中的節點。

2、.save_selected()：儲存樹節點目前被選中的狀态。(實作是儲存在一個變量中，是以重新整理頁面後不存在)。這個函數和cookies plugin插件相關。主要在内部使用，事件觸發函數。

3、.reselect()：從save_selected()函數儲存的變量恢複樹的狀态，主要在内部使用，事件觸發函數。

4、.refresh(node)：覆寫了core元件中的refresh函數。啟用前重新整理儲存選擇狀态和事後恢複。

5、.hover_node(node)：設定節點hoverd，事件觸發函數。

node:mixed，混合類型，可以為Dom node，jQuery node或指向元素在書中的選擇點。

6、dehover_node()：删除目前已經hovered 節點，事件激發函數。

7、.select_node(node, check, event)：

check:bool ，是否檢測規則(檢測"select_limit"選項等)并且做合适的行動或者僅僅選中被選中的節點。

event:event，内部使用，當點選一個節點時觸發此動作。

8、.deslect_node(node), .toggle_select(node):這兩個函數控制一個節點的選中狀态，deselect_node激發了一個事件。

9、.get_selected(context)：傳回被選中的所有節點。

10、.deselect_all(context)：補選中所有節點。

11、is_select(node)：傳回是否某個節點被選中。