ztree 简单使用demo

@(JAVA开发)

ztree 简单使用demo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网链接

首先需要后台获取需要的数据，注意设置map 里面的关键字等。返回的结果是一个map 的list

 /**
     * 机构树(只查已启用)
     * 
     * @param request
     * @return
     */
    @RequestMapping(value = "/selectDeptInfoConditionByUser", method = RequestMethod.POST)
    @ResponseBody
    public List<Map<String, Object>> selectDeptInfoConditionByUser(Long orgId) {
        log.debug("数据orgId=" + orgId);
        try {
            OrganizationListVo systemOrganizationListVo = systemOrganizationService.selectOrgTreeByUser(orgId);
            List<OrganizationVo> systemOrganizationVos = systemOrganizationListVo.getSystemOrganizationVos();
            List<Map<String, Object>> treeMapList = new ArrayList<Map<String, Object>>();
            for (OrganizationVo organizationVo : systemOrganizationVos) {
                Map<String, Object> treeMap = new HashMap<String, Object>();
                treeMap.put("id", organizationVo.getOrgId());
                treeMap.put("pId", organizationVo.getParentId());
                treeMap.put("name",
                        /* "("+organizationVo.getExtOrgCode()+")"+ */organizationVo.getOrgName());
                treeMap.put("organization", organizationVo);
                treeMapList.add(treeMap);
            }
            return treeMapList;
        } catch (Exception e) {
            throw new PurchaseException(OperCodeDefine.OPER_DB_FAILED, OperCodeDefine.OPER_DB_FAILED_NAME);
        }
    }

这是需要展示 ztree 的地方

<div class="tree-wrapper">
        <div id="publish-region-tree" class="ztree" data-orgid="${manageAcctInfo.orgId }">
        </div>
/div>

接下来就是最主要的js代码了

 //获取机构树
    UserManagement.prototype.initOrgTree = function (loginId){
        //初始化selectpicker插件
        $('.selectpicker').selectpicker();
        var orgId = $publishRegionTree.data('orgid');
        $.ajax({
            url: organizationLinkUrl,
            type: 'POST',
            dataType: 'json',
            data: {loginId:loginId},
            async: true
        }).done(function (data) {
            if (data !== null) {
                //展示机构树
                treeObj = $.fn.zTree.init($('#publish-region-tree'), setting, data);
                var nodes = treeObj.getNodes();
                var node = treeObj.getNodeByParam("id", nodes[0].id, null);
                /*var node = treeObj.getNodeByParam("id", orgId, null);*/
                treeObj.expandNode(node, true, false, true);
                treeObj.selectNode(node);

                //获取所有机构树
                var nodeListArray = new Array();
                for(var i=0;i<data.length;i++){
                    nodeListArray.push(data[i].name);
                }

                $("#treeSearch").autocomplete({
                    showNoSuggestionNotice:true,
                    noSuggestionNotice:'搜索无结果',
                    triggerSelectOnValidInput: false,
                    lookup:nodeListArray,
                    minChars: 1,
                    onSelect: function(result) {
                         var node = treeObj.getNodeByParam("name", result.value, null);

                         treeObj.selectNode(node);
                         treeObj.expandNode(node, true, false, true);
                         UserManagement.prototype.loadDataTable(node.orgId);
                     }
                });
            } else {
                $.msg('fail', '操作失败！');
            }
        });
    }

ztree 的使用大概如此，上面还有一个根据关键字进行的模糊匹配。autocomplete这个插件的使用会再写一片博文介绍。