学习记录，动态生成树状图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
<div class="toolbar-btn-action">
     <button title="全选" type="button" class="btn" id="check-all">
      	<i class="fa fa-check-circle-o"></i> 全选
      </button>
      <button title="取消全选" type="button" class="btn" id="uncheck-all">
      	<i class="fa fa-ban"></i> 取消全选
      </button>
      <button title="展开所有节点" type="button" class="btn" id="expand-all">
     	<i class="fa fa-plus"></i> 展开所有节点
      </button>
      <button title="收起所有节点" type="button" class="btn" id="collapse-all">
      	<i class="fa fa-minus"></i> 收起所有节点
      </button>
      <span class="form-inline">
      	<input class="form-control" id="search-auth" value="" placeholder="输入关键字搜索">
      </span>
</div>
<!-- 城市授权 jstree -->
<div id="jstree" class="jstree">
   <ul>
  		 <!-- opened":true属性控制该节点是否展开
  		 selected":true属性控制该节点是否是选择状态 
  		 "icon":"fa fa-fw fa-user"还可以配合font-awsome改变节点图标-->
        <li data-jstree='{"opened":true,"selected":true}'>北京市
           <ul>
             <li data-jstree='{"opened":true}'>北京市</li>
             <li data-jstree='{"opened":true}'>北京市</li>
             <li data-jstree='{"opened":true}'>北京市</li>
           </ul>
         </li>
         <li data-jstree='{"opened":true}'>河北省
        	 <ul>
                 <li data-jstree='{"opened":true,"selected":true}'>石家庄市</li>
                 <li data-jstree='{"opened":true}'>唐山市</li>
                 <li data-jstree='{"opened":true}'>邢台市</li>
                 <li data-jstree='{"opened":true}'>邯郸市</li>
                 <li data-jstree='{"opened":true}'>石家庄市</li>
                 <li data-jstree='{"opened":true}'>唐山市</li>
           </ul>
        </li>
     </ul>
 </div>
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();