jsTree语法基本操作简明demo

"plugins" : [
    "checkbox", //添加checkbox
    "contextmenu", //选中右键文本内容
    "dnd", //是否可以拖拽
    "massload",
    "search", //搜索
    "sort", //排序
    "state", //在刷新之后保持刷新之前状态（比如选中和展开）
    "types", //设置types
    "unique", 
    "wholerow", //选中整行
    "changed",
    "conditionalselect"
]

初始化完成后展开所有节点
$("#treeDiv").on("ready.jstree", function (e, data) {   //树创建完成事件
                data.instance.open_all();    //展开所有节点
            });
获取当前选择的节点

获取当前选择的节点
$("#treeDiv").on('changed.jstree', function (e, data) {   //选中节点改变事件
                var node = data.instance.get_node(data.selected[0]);  //获取选中的节点
            });    
                

    

<div id="jstree5">
 <!-- jstree内容加载区域 -->
</div>

<script type="text/javascript" src="js/jstree/js/jstree.min.js"></script>
<script type="text/javascript" src="js/jstree/pages/jstree.js"></script>
<script type="text/javascript">
    $('#jstree5').jstree({
              'core' : {
                //ajax请求数据,返回特定格式
                    'check_callback': true,  
                    'data' : function (obj, callback){  //后台返回整个json树，无限极分类处理好数据
                            $.ajax({  
                                type : "POST",
                                async:false,
                                url : "cms/getTree",  
                                dataType : "json",  
                                data:{id:id},
                                success : function(data) {  
                                    console.info(data);  
                                    if(data) {  
                                        callback.call(this, data);  
                                    }else{  
                                        $("#jstree5").html("暂无数据！");  
                                    }  
                                }  
                            });  
                    }, 

                    //数据格式，参数可自定义添加
                    /*
                    'data' : [
                           { "id" : "ajson1", "parent" : "#", "text" : "Simple root node","其他参数"："other" },
                           { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
                           { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
                           { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
                        ]
                        */

               'themes' : {
                'responsive' : true
               }
              },
            'plugins' : ["wholerow","state",'dnd','contextmenu'],//通过添加contextmenu扩展来实现右键菜单操作
            "contextmenu": {//重写contextmenu菜单
                    select_node:false,//设置当前节点是否为选中状态 true表示选中状态
                    show_at_node:true,//设置右键菜单是否和节点对齐 true表示对齐
                   "items": {
                    "create": null,
                    "rename": null,
                    "remove": null,
                    "ccp": null,
                    "add": {
                         "label": "新增",
                         "action": function (data) { 
                              var inst = jQuery.jstree.reference(data.reference);
                              var obj = inst.get_node(data.reference);//获得当前点击node的参数obj.id
                              
                              
                             }
                    },
                    
                    "edit": {
                         "label": "编辑",
                         "action": function (data) { 
                          var inst = jQuery.jstree.reference(data.reference);
                          var obj = inst.get_node(data.reference);
                          $('#url').val(obj.original.url);//后台data自定义的参数
                          $('#sort').val(obj.original.sort);//自定义参数
                          
                          
                         }
                    },
                    "del": {
                         "label": "删除",
                         "action": function (data) { 
                          var inst = jQuery.jstree.reference(data.reference);
                          var obj = inst.get_node(data.reference);
                          var childNodes = inst.get_children_dom(obj.id);//当前节点下面是否有子节点
                          if (childNodes.length == 0) {
                            
                            $.post('cms/del',{id:obj.id},function (res) {
                                if (res.msg == 'ok') {
                                    alert('删除成功');
                                    window.location.href="";
                                }else{
                                    alert(1111);
                                }
                            },'json');
                          }else{
                            alert('1111');
                          }
                          
                         }
                    },

                    
                   
            }
        }


});
var selected = [1,2,3,4,5,6];
 $('#jstree5').bind("loaded.jstree", function (e, data) {
            $("#jstree5").jstree('select_node',selected);//加载初始化默认勾选已选中节点
      });

var ref = $('#jstree5').jstree(true);//获得整个树
        var sel = ref.get_selected(false);//获得所有选中节点，返回值为数组
        var totalSel = sel.toString(); 
        $(".jstree-undetermined").each(function(){ 
            totalSel = totalSel + ',' + $(this).parent().parent().attr('id'); 
        });

</script>