頁面展示區域樹功能

　　需求：使用者登入之後查詢使用者擁有的區域，有的就進行勾選，將區域按樹狀圖展示出來

　　前端使用的是jstree

<input type="hidden" name="areaId" value="" id="AreaLists">
<div class="col-sm-10">
    <div class="box box-default">
        <div class="box-header with-border">
            <h5 class="box-title"><i 
 
class="fa fa-sitemap"></i> 區域目錄</h5>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" id="refreshDeptTree"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
        <
 
div class="box-body">
            <div class="row" style="margin-right:-10px;">
                <div class="row-sm-11" style="padding-left: 10px;height:600px; padding-right: 10px;overflow-y:auto;overflow-x:auto;">
                    <div id="deptTree"></div>
                </
 
div>
            </div>
        </div>
    </div>
</div>

<script>
//區域樹功能
        sysUserId = '0';
        $('#deptTree').jstree({
            core : {
                data : {             
                    url : "${ctx}/ibdpgz-portal/areadim/depttree",
                    data : function (node) {
                        return { "id" : node.id,"sysUserId" : sysUserId};
                    }
                },
                multiple : true
            },
            plugins : [
                "checkbox","wholerow"
            ],
            "checkbox" : {
                "three_state" : false

            }
        });
    });

    // 區域樹點選事件
     $('#deptTree').on('select_node.jstree', function (e, data) {
         // console.log(data.selected);
         $("#AreaLists").val(data.selected)
         // $("#AreaLists").value = data.selected;
     });
     $('#deptTree').on('deselect_node.jstree', function (e, data) {
         // console.log(data.selected);
         $("#AreaLists").val(data.selected)
         // $("#AreaLists").value = data.selected;
     });
</script>

　　後臺程式碼：

@RequestMapping(value = "/depttree", method = RequestMethod.GET)
    public
    @ResponseBody
    Object deptTree(@RequestParam("id") String id,@RequestParam("sysUserId") String sysUserId) throws SysException {
        JsTreeNode root = new JsTreeNode();
        if (id.equals("#")) {
            id = "0";
            //增加根節點
            root.setId("0");
            root.setText("區域目錄");
            root.setParent("#");
            root.setIcon("fa fa-folder-o");
            if(((AreaDimMVO) model).getAreaId() == null || "0".equals(((AreaDimMVO) model).getAreaId())){
                JsTreeNodeState state = new JsTreeNodeState();
                state.setOpened(true);
                state.setSelected(false);
                state.setDisabled(true);
                root.setState(state);
            }
        }

        AreaDimMVO areaDimMVO = new AreaDimMVO();
        areaDimMVO.setSts("A");
        areaDimMVO.setAreaId("520000");
　　　　 //根據sysUserID設定擁有區域許可權的使用者
        UserFunAreaMVO userFunAreaMVO = new UserFunAreaMVO();
        userFunAreaMVO.setSysUserId(sysUserId);
        List<UserFunAreaMVO> userFunAreaMVOList = null;
        List<JsTreeNode> jsTreeList = new ArrayList<JsTreeNode>();
        try {
            userFunAreaMVOList = userFunAreaDelegate.queryList(userFunAreaMVO);
            Map <String,Object> map = new HashMap<String, Object>();
            for(int i=0; i<userFunAreaMVOList.size(); i++){
                map.put(userFunAreaMVOList.get(i).getAreaId(),"");
            }
            //查詢第一級選單目錄
            List<AreaDimMVO> orgListParent = areaDimDelegate.queryList(areaDimMVO);

            for (AreaDimMVO org : orgListParent) {
                JsTreeNode node = new JsTreeNode();
                node.setId(org.getAreaId());
                node.setParent(StringUtils.isNotBlank(org.getParentId()) ? "0" : org.getParentId());
                node.setText(org.getName());
                JsTreeNodeState state = new JsTreeNodeState();
                if (map.containsKey(org.getAreaId())) {
                    state.setSelected(true);
                } else {
                    state.setSelected(false);
                }
                state.setOpened(true);
                node.setState(state);
                jsTreeList.add(node);
            }
            //查詢第二級及以下選單目錄
            areaDimMVO.setAreaId("52");
            List<AreaDimMVO> orgList = areaDimDelegate.queryAreaCatList(areaDimMVO);
            for (AreaDimMVO org : orgList) {
                JsTreeNode node = new JsTreeNode();
                String flag = judgeParentNode(org.getParentId());
                if(flag =="1"){
                    node.setId(org.getAreaId());
                    node.setParent(org.getParentId());
                    node.setText(org.getName());
                    JsTreeNodeState state = new JsTreeNodeState();
                    if (map.containsKey(org.getAreaId())) {
                        state.setSelected(true);
                    } else {
                        state.setSelected(false);
                    }
                    state.setOpened(false);
                    state.setChecked(true);
                    node.setState(state);
                    jsTreeList.add(node);
                }
            }
        } catch (AppException e) {
            logger.debug("查詢組織結構資訊時發生錯誤：{}", e.getMessage());
        }

        if (root.getId() != null) {
            jsTreeList.add(root);
        }
        System.out.println("jsTreeList"+jsTreeList);
        return jsTreeList;
    }

    /*
     * 判斷二級及一下選單目錄是否有對應上級選單
     */
    public String judgeParentNode(String parentId) throws SysException {
        String flag = "0";
        AreaDimMVO areaDimMVO =  new AreaDimMVO();
        areaDimMVO.setSts("A");
        areaDimMVO.setAreaId("52");
        List<AreaDimMVO> arealist;
        try {
            arealist = areaDimDelegate.queryAllAreaCatList(areaDimMVO);
            for(int i=0;i<arealist.size();i++){
                if(parentId.equals(arealist.get(i).getAreaId()) ){
                    flag = "1";
                    break;
                }
            }
        } catch (AppException e) {
            e.printStackTrace();
        }
        return flag;
    }

　　結果展示：