学习记录，动态生成树状图jstree

学习记录，动态生成树状图jstree

jstree官网地址 https://www.jstree.com.cn
项目功能：
1.城市带选框树状展示
2.全选/取消全选所有节点
3.收起/展开所有节点
4.搜索节点名称

基于bootstrap做的项目，但是这里只有样式有影响。
需要引的文件
/jquery.min.js
/dist/themes/default/style.min.css
/dist/jstree.min.js

HTML

     
      	 全选
      
      
      	 取消全选
      
      
     	 展开所有节点
      
      
      	 收起所有节点
      
      
      	
      



   

  		 
        
北京市
           

             
北京市
             
北京市
             
北京市
           
         
         
河北省
        	 

                 
石家庄市
                 
唐山市
                 
邢台市
                 
邯郸市
                 
石家庄市
                 
唐山市
           
        
     
 
JS
    $('#jstree').jstree({
        // 引用插件，选择框和搜索
        plugins: ["checkbox", "search"],
        "checkbox" : {
            "keep_selected_style" : false,
            "three_state" : false,
            "cascade" : 'down+up'
        },
        "search" : {
            'show_only_matches' : true,
            'show_only_matches_children' : true
        }
    });
    // 搜索功能
    var to = false;
    $('#search-auth').keyup(function (event) {
        if(to) { clearTimeout(to); }
        to = setTimeout(function () {
            var v = $('#search-auth').val();
            $('#jstree').jstree(true).search(v);
        }, 250);
    });
    // 全选
    $('#check-all').click(function () {
        $('#jstree').jstree(true).check_all();
    });
    // 取消全选
    $('#uncheck-all').click(function () {
        $('#jstree').jstree(true).uncheck_all();
    });
    // 展开所有
    $('#expand-all').click(function () {
        $('#jstree').jstree(true).open_all();
    });
    // 收起所有
    $('#collapse-all').click(function () {
        $('#jstree').jstree(true).close_all();
    });
//获取已经选择的节点
$('#jstree').jstree(true).get_checked();