自定义jstree

1、tree.js

<%@ page contentType="text/html;charset=UTF-8" %>
    <script>
        $(document).ready(function() {
            var to = false;
            $('#search_q').keyup(function () {
                if(to) { clearTimeout(to); }
                to = setTimeout(function () {
                    var v = $('#search_q').val();
                    $('#familyTreeData').jstree(true).search(v);
                }, 250);
            });
            $('#familyTreeData').jstree({
                'core' : {
                    "multiple" : false,
                    "animation" : 0,
                    "themes" : { "variant" : "large", "icons":true , "stripes":true},
                    'data' : {
                        "url" : "${ctx}/satistics/socialAssistanceInformation/treeData?param=2",
                        "dataType" : "json" 
                    }
                },
                "conditionalselect" : function (node, event) {
                    return false;
                },
                'plugins': ["contextmenu", 'types', 'wholerow', "search","checkbox"],
                 "checkbox": {
                        "keep_selected_style": false,//是否默认选中
                        "three_state": true,//父子级别级联选择
                        "tie_selection": false
                    },
                "types":{
                    'default' : { 'icon' : 'fa fa-file-text-o' },
                    '1' : {'icon' : 'fa fa-home'},
                    '2' : {'icon' : 'fa fa-umbrella' },
                    '3' : { 'icon' : 'fa fa-group'},
                    '4' : { 'icon' : 'fa fa-file-text-o' }
                }
                    
            }).on('loaded.jstree', function() {
                /*$("#familyTreeData").jstree('open_all');*/
                $("#familyTreeData").jstree();
            }).on('check_node.jstree', function(event, obj) {
                $('#userIds').val("");
                //循环出选中的数据
                var nodes= $("#familyTreeData").jstree().get_checked(true);
                //定义变量接收所选树的集合
                var officeStr = "";
                for(var i=0; i<nodes.length; i++) {
                    
                    if (nodes[i].original.isParent){
                        continue; 
                    }else{
                        //赋值（拼接字符串）
                        officeStr+="'"+nodes[i].original.id+"',";
                    }
                }
                userId = officeStr.substring(0, officeStr.lastIndexOf(","));  
                alert(userId);
                $('#userIds').val(userId);
            });
        });
    </script>

2、页面引入tree.js和一下两个文件

创建页面显示区域3、

3、后台
    public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId,HttpServletRequest request, HttpServletResponse response) {
        List<Map<String, Object>> mapList = Lists.newArrayList();
        ArrayList<SysAddress> addlist = sysAddressMapper.findYZ();
        ArrayList<Family> familyList = familyMapper.findFamilyTree();
        
        for (int i=0; i<addlist.size(); i++){
            SysAddress e = addlist.get(i);
            if (StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1)){
                Map<String, Object> map = Maps.newHashMap();
                map.put("id", e.getId());
                map.put("text", e.getName());
                if(StringUtils.isBlank(e.getParentId()) || "4".equals(e.getType())){
                    map.put("parent", "#");
                    Map<String, Object> state = Maps.newHashMap();
                    state.put("opened", true);
                    map.put("state", state);
                }else{
                    map.put("parent", e.getParentId());
                }
                mapList.add(map);
                if("6".equals(e.getType())) {
                    for(Family r:familyList) {
                        if(r.getFamilyVillage().equals(e.getId())) {
                            Map<String, Object> m = Maps.newHashMap();
                            m.put("id", r.getId());
                            m.put("text", r.getFamilyNum());
                            m.put("parent", e.getId());
                            mapList.add(m);
                        }else {
                            continue;
                        }
                    }
                }
                if(e.getParentIds().split(",").length<=6) {
                    //不可选择
                    map.put("isParent",true);    
                }
            }
        }
        return mapList;
    }
}