jstree单选和多选

引用地址:http://www.cnblogs.com/vevi/p/5623683.html

JsTree中节点添加CheckBox 以及 单选的实现

jstree中添加checkbox，需要在初始化时设置plugins属性：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$( '#DpTree' ).data( 'jstree' ,  false ).empty().jstree({                  'core' : {                      'data' : data.data,                      "check_callback" :  true ,                      'multiple' :  false ,                  },                  "force_text" :  true ,                  plugins: [ "sort" ,  "types" ,  "checkbox" ,  "themes" ,  "html_data" ],                  "checkbox" : {                      "keep_selected_style" :  false , //是否默认选中                      "three_state" :  false , //父子级别级联选择                      "tie_selection" :  false                  },              });

 　　eg:设置three_state为true时，选择所有子节点后父节点会自动选择。

  

我的需求是选择一个节点绑定给其他数据，节点只能选择一个，且不可重复。

故，添加如下事件，选择节点后遍历所有选中的节点，更改其checkbox属性。

1 2 3 4 5 6 7 8

$( '#DpTree' ).on( 'check_node.jstree' ,  function (event, obj) {                  var  ref = $( '#DpTree' ).jstree( true );                  var  nodes = ref.get_checked();   //使用get_checked方法                  $.each(nodes,  function (i, nd) {                      if  (nd != obj.node.id)                          ref.uncheck_node(nd);                  });              });

只能选择一个节点，可用于类似下拉框中的选择。

多选

 $(function () {
  $("#using_json").jstree({
           "core": {
               "data": ${tree}
           },
           "checkbox" : {
               "keep_selected_style" : false
           },
           
           "plugins" : [ "wholerow", "checkbox","types","themes"]
       })
  
       });