jstee--基础用法

最近项目中用到jstree，在此记录一下基本用法，以免忘记

js

var JsTree = function () {
     //获取部门Id，用于回显
     var deptId=$("#deptId").val();
    $('#tree_2').jstree({
        //jstree的插件，可查看jstree官网查看
       'plugins': ["wholerow", "checkbox", "types"],
       // 'plugins': ["wholerow", "checkbox", "types","state"],
       //核心功能
        'core': {
           //设置为单选
           //'multiple':false
            "themes": {
                "responsive": false
            },
            'data':  {
                "dataType": 'json',
                //异步请求的url
                "url":function(node){
                    return contextpath +'/role/getDept?deptId='+roleId
                },
                //返回的结果
                "data":function(node){
                    var param = node.id;
                    //默认param为#，第一次异步请求时将param
                    //赋值为数据中第一级的数据的parentId
                    if(param == '#')
                        param = 0;
                    //判断节点是否被选中    
                    if(node.sel){
                        node.state.selected=true;
                    }
                    //返回parentId的值，第一次进行异步请求时
                    //parentId=0,则第一级的数据的parentId=0
                    return {"parentId" : param};
                }
            }
        },
        "types": {
            "default": {
                "icon": "fa fa-folder icon-state-warning icon-lg"
            },
            "file": {
                "icon": "fa fa-file icon-state-warning icon-lg"
            }
        }
    });
    //jstree默认全部展开
    $('#tree_2').on("ready.jstree", function (e, data) {
        $('#tree_2').jstree("open_all");
     });
    $('#tree_2').on('changed.jstree',function(e,data){
        //当前选中节点的Id--单选时有效
        var domId = data.instance.get_node(data.selected[0]).id;
        //当前选中节点的文本值--单选时有效
        var value = data.instance.get_node(data.selected[0]).text;
        //获取所有选中的节点对象
        $('#tree_2').jstree().get_checked(true); 
        //获取所有选中的节点ID
        var ids=$('#tree_2').jstree().get_checked(); 
        $('#deptId').val(ids);
    });

};

HTML

<div class="portlet-body">
      <div id="tree_2" class="tree-demo">
       </div>
 </div>
<input type="hidden" id="deptIds" name="deptIds" 
          th:value="${deptIds}" />
 <!--tree  begin-->
<link rel="stylesheet" type="text/css"   th:href="@{/theme/assets/global/plugins/jstree/dist/themes/default/style.min.css}"/>
<script th:src="@{/theme/assets/global/plugins/jstree/dist/jstree.min.js}"></script>
<!--tree  end-->

JAVA
实体类部分字段

 @RequestMapping("/getDept")
 @ResponseBody
 public List getDept(HttpServletRequest request, Integer
        parentId,String deptIds) {
    //根据parentId找到所有部门
    List<Department> departmentList = departmentService.findAllByParentId(parentId);
    //创建一个list用于jstree所需要的数据  
    List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
    if (departmentList != null && departmentList.size() > 0){
       //循环根据parentId所得到的 list集合
       for (Department department : departmentList) {
           Map<String, Object> map=new HashMap<String,Object>();
           //map中的id为部门的id,text为显示的数据，这里是部门名称
           map.put("id", department.getDeptId());
           map.put("text", department.getDeptName());
           //根据当前deptId，判断是否有parentId为deptId的数据
           List<Department> childrens = departmentService.findAllByParentId(department.getDeptId());
           //如果当前department有下级时，children就为true
           //children表示的是界面中部门前面是否有+号
           if(childrens!=null && childrens.size()>0){
               map.put("children", true);
           }else{
               map.put("children",false);
               Integer deptId = 0;
               //如果deptIds不为空，即当树回显时判断两者的id是否
               //相同，如果相同则map中要加入state属性
               //这段代码可根据业务放在所需的位置
               if(deptIds != null && deptIds != ""){
                   String[] deptId1 = deptIds.split(",");
                   for(int i=0;i<deptId1.length;i++){
                       deptId = Integer.parseInt(deptId1[i]);
                       if(department.getDeptId().equals(deptId)){
                            Map<String, Object> sel = new
                              HashMap<String, Object>();                                      
                            sel.put("selected",true);
                            map.put("state",sel);
                        }
                    }
                }
                list.add(map);
            }
        }
        return list;
    }

需要注意的是，当第一次打开界面某个父节点默认不展开的时候如果选中了该父节点，此时js中得到所有被选中的Id的方法只能得到该父节点的一个Id，但是如果展开过一遍的话，之后再展开或不展开都会得到该节点和其子节点的所有Id。

当点击子节点时，如果没有全部选中所有平级的节点的话，get_checked()方法依然只会得到被选中的节点的Id，其父节点的Id并不会被得到，只有子节点全部被选中，此时父节点也被选中的情况下才能得到子节点和父节点的Id.即get_checked()方法只能得到被选中的节点的Id

附上jstree官网

https://www.jstree.com/