OA系统中zTree插件的使用

OA系统中zTree插件的使用

Controller,Service,Dao查询设置

1. Controller

@RequestMapping("/getDeptListParentId")
    @ResponseBody
    public List<Map<String, Object>> getDeptListParentId(Integer id) {
        if (id == null) {
            id = 0;
        }
        ArrayList<Map<String, Object>> list = new ArrayList<>();

        List<Dept> depts = deptService.getDeptListByParentId(id);
        System.out.println(depts);
        for (Dept dept : depts) {
            HashMap<String, Object> map = new HashMap<>();
//            将Ztree所需要的属性值放在map中以便通过json格式返回
            map.put("id", dept.getId());
            map.put("name", dept.getName());
//            判断是否有子节点
            map.put("isParent", dept.getSubDeptId() != null ? true : false);
//            子节点可能不止一个，所以将map放入list中，以便通过json格式返回
            list.add(map);
        }
        return list;
    }

2. Service
   
   
   3.Dao
   

</select>
    <select id="getDeptListByParentId" resultMap="baseResultMap">
        SELECT
	d.*, sub.id as subId
FROM
	t_dept d
LEFT JOIN t_dept sub ON (d.id = sub.parent_id)
WHERE
	d.parent_id = #{id}
GROUP BY
	d.id;
    </select>

注: 实体类Dept要加上subDeptId属性

初始化deptZtree.jsp

1. 引入相关静态资源

<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>

2. 初始化设置

<SCRIPT LANGUAGE="JavaScript">
        <%--        树插件初始化好后的对象--%>
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            async: {
                enable: true,
                url: "http://localhost:8080/dept/getDeptListParentId",
                autoParam: ["id", "name"]
            },
            //点击节点触发zTreeOnClick
            callback: {
                onClick: zTreeOnClick
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [];
        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        function zTreeOnClick(event, treeId, treeNode) {
            $("#deptName").val(treeNode.name)
        };
    </SCRIPT>
    <div>
    <div style="text-align: center"><input type="text" name="deptName" id="deptName"><input type="button" value="确定"></div>
    <ul id="treeDemo" class="ztree"></ul>
</div>

addDept.jsp中的相关设置

1. 点击”选择部门“后，页面弹出设置
   

function showDeptTree() {
        //弹出页面设置
        layer_show("部门列表", "toDeptTree", "300", "400")
    }

2. springmvc.xml相关设置

<!--    配置从一个jsp跳转到另一个jsp
    path：请求的路径
    view-name：视图所在位置
    不需要在Comtroller中额外写一个方法调到jspyemian
    -->
    <mvc:view-controller path="toAddDept" view-name="dept/addDept"></mvc:view-controller>
    <mvc:view-controller path="toDeptTree" view-name="dept/deptZtree"></mvc:view-controller>