2011-01-05 151 views
1

我有我使用的select_node事件切換節點(擴大)一jstree,因此已刪除在樹中切換箭頭,因爲他們長得難看,我已經不再需要他們。JSTree select_node事件和複選框

現在我已經添加的複選框插件樹中使用,但發現時,該插件是活動的select_node事件被禁用。

如何在不重新添加難看的切換箭頭的情況下使用複選框插件切換節點?我可以在check/uncheck事件中做到這一點,但我不想每次展開節點時都選中/取消選中。

回答

2

最新版本的jstree現在允許通過單擊複選框或節點標題來單獨檢查和選擇節點。

+0

這很有趣,你可以點一些裁判的節點問題? – 2011-01-17 19:34:46

+0

http://code.google.com/p/jstree/source/browse/#svn%2Ftrunk - 從那裏獲取最新版本。 http://code.google.com/p/jstree/issues/detail?id=770&can=1&q=checkbox&colspec=ID%20Type%20Status%20Priority%20Owner%20Summary – Bob 2011-01-18 12:35:57

2

JsTree提供了themes的樣式,因此您可以自定義並加載它。 你只需要替換精靈圖像,這就是那麼多。

+1

那並沒有回答我如何切換時複選框處於活動狀態,而無需使用箭頭(或我可能會替換箭頭任何圖像) – Bob 2011-01-05 10:31:11

2

假設你有一個例子樹爲http://www.jstree.com/documentation/checkbox,與 箭頭取出。您無法執行復選框選擇和分支切換,而無需中斷用戶界面交互。但是,由於非葉節點不包含模型數據 (它們的複選框僅用作全選/全選功能),因此您可以從中刪除 複選框,將其上的點擊事件重新定義爲「toggle_node」,而 留下其餘unthouched。

您可以刪除在非葉麗節點的複選框,並讓他們點擊事件 切換葉子。這將完成您想要的行爲,但會刪除 非葉節點複選框的「全選/全部取消選擇」功能。

只需在示例頁面中添加標有「+」的行。

 
    $("#demo1").jstree({ 
     "plugins" : [ "themes", "html_data", "checkbox" ] 
    }); 

+ $("#demo1 li").not(".jstree-leaf").each(function() { 
+  $("a ins.jstree-checkbox", this).first().hide(); 
+  $("a", this).first().click(function(event) { 
+   $("#demo1").jstree("toggle_node", "#"+$(this).parent().attr('id')); 
+   event.stopPropagation(); 
+   event.preventDefault(); 
+  }); 
+ });