jQuery的zTree插件

写在前面

jQuery的 zTree插件

关键代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>菜单列表</title>
    <t:base type="jquery"></t:base>
    <link rel="stylesheet" type="text/css" href="plug-in/ztree/css/metroStyle.css">
    <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
    <script type="text/javascript">
        var setting = {
            check: {
                enable: false,// 是否启用复选框
                chkboxType: {"Y": "", "N": ""}
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onExpand: zTreeOnExpand
            }
        };

        //加载展开方法
        function zTreeOnExpand(event, treeId, treeNode) {
            var treeNodeFuncId = treeNode.id;
            $.post(
                'whiteListController.do?getMenuInfo',
                {parentFuncId: treeNodeFuncId},
                function (data) {
                    var d = $.parseJSON(data);
                    if (d.success) {
                        var dbDate = eval(d.msg);
                        var tree = $.fn.zTree.getZTreeObj("menuSelect");

                        if (!treeNode.zAsync) {
                            tree.addNodes(treeNode, dbDate);
                            treeNode.zAsync = true;
                        } else {
                            tree.reAsyncChildNodes(treeNode, "refresh");
                        }
                    }
                }
            );
        }

        //首次进入加载level为1的
        $(function () {
            $.post(
                'whiteListController.do?getMenuInfo',
                function (data) {
                    var d = $.parseJSON(data);
                    if (d.success) {
                        var dbDate = eval(d.msg);
                        $.fn.zTree.init($("#menuSelect"), setting, dbDate);
                    }
                }
            );
        });
    </script>
</head>
<body style="overflow-y: auto" scroll="no">
<ul id="menuSelect" class="ztree" style="margin-top: 30px;"></ul>
</body>
</html>

jsp代码解读

1."<!DOCTYPE html>" 是必需的, 进行 W3C 申明

<!DOCTYPE html >

2.zTree 的容器 className 设置为 "ztree"

<ul id="menuSelect" class="ztree" style="margin-top: 30px;"></ul>

3.然后看js部分

3.1页面初始化执行代码

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

init方法为 zTree 初始化方法，创建 zTree 必须使用此方法

1、页面需要进行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。

2、需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。

3、需要加载 jquery-ztree.core-3.0.js，如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。

4、需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。

5、如果需要使用自定义图标请参考相应的Demo。

6、请注意设置 zTree 的容器样式 class="ztree"，其中 "ztree" 这个 className，可以根据需要随意修改，别忘了修改 css 中对应名字就是了，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。

该init方法参数说明(obj, zSetting, zNodes)三个参数

objjQuery Object
用于展现 zTree 的 DOM 容器

zSettingJSON
zTree 的配置数据，具体请参考 “setting 配置详解”中的各个属性详细说明

zNodesArray(JSON) / JSON
zTree 的节点数据，具体请参考 “treeNode 节点数据详解”中的各个属性详细说明

1、v3.x 支持单独添加一个节点，即如果只新增一个节点，不用必须包在数组中

2、如果需要异步加载根节点，可以设置为 null 或 [ ]

3、使用简单数据模式，请参考 setting.data.simpleData 内的属性说明

返回值JSON
zTree 对象，提供操作 zTree 的各种方法，对于通过 js 操作 zTree 来说必须通过此对象

如果不需要自行设定全局变量保存，可以利用 $.fn.zTree.getZTreeObj 方法随时获取

3.2节点展开执行方法即setting中设置的callback函数zTreeOnExpand

该回调函数共有三个参数(event, treeId, treeNode)

参数说明

eventjs event 对象
标准的 js event 对象

treeIdString
对应 zTree 的 treeId，便于用户操控

treeNodeJSON
被展开的节点 JSON 数据对象

被展开的节点json对象可以获取到该节点id, 传到后台通过判断该节点是否为父节点(即是否有子节点), 如果有子节点则后台查询出的子节点信息由前台接收后通过addNodes方法添加子节点.或通过reAsyncChildNodes方法强行异步加载父节点的子节点(parentNode, reloadType, isSilent, callback)

addNodes方法参数说明(parentNode, [index], newNodes, isSilent)

parentNodeJSON
指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可。

请务必保证此节点数据对象 是 zTree 内部的数据对象

[index]Number
新节点插入的位置（从 0 开始）

index = -1 时，插入到最后

此参数可忽略

v3.5.19+

newNodesJSON / Array(JSON)
需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可，详细请参考“treeNode 节点数据详解”

1、v3.x 支持单独添加一个节点，即如果只新增一个节点，不用必须包在数组中

2、使用简单数据模式，请参考 setting.data.simpleData 内的属性说明

isSilentBoolean
设定增加节点后是否自动展开父节点。

isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开。

返回值Array(JSON)
返回值是 zTree 最终添加的节点数据集合

如果 newNodes 是单个节点数据 JSON，返回值也是将其包在 Array 内

请务必记住：返回值中的数据对象 是 newNodes 被 clone 后的，所以绝对不相等！

reAsyncChildNodes方法参数说明(parentNode, reloadType, isSilent, callback)

parentNodeJSON
指定需要异步加载的父节点 JSON 数据

1、parentNode = null 时，相当于从根节点 Root 进行异步加载

2、parentNode.isParent = false 时，不进行异步加载

3、请务必保证此节点数据对象 是 zTree 内部的数据对象

reloadTypeString
reloadType = "refresh" 表示清空后重新加载。

reloadType != "refresh" 时，表示追加子节点处理。

isSilentBoolean
设定异步加载后是否自动展开父节点。

isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开。

callbackfunction
刷新完成后的回调函数。

返回值无
目前无任何返回值

java代码解读

    /**
     * 查询菜单信息
     * @param request
     * @return
     */
    @RequestMapping(params = "getMenuInfo")
    @ResponseBody
    public AjaxJson getMenuInfo(HttpServletRequest request) {
        AjaxJson j = new AjaxJson();
        String parentFuncId = request.getParameter("parentFuncId");
        CriteriaQuery cq = new CriteriaQuery(TSFunction.class);
        if (parentFuncId != null) {
            cq.eq("TSFunction.id", parentFuncId);
        } else {
            cq.eq("functionLevel", Short.valueOf("0"));
        }
        cq.addOrder("functionOrder", SortDirection.asc);
        cq.add();

        // 获取装载数据权限的条件HQL
        cq = HqlGenerateUtil.getDataAuthorConditionHql(cq, new TSFunction());
        cq.add();
        List<TSFunction> functionList = systemService.getListByCriteriaQuery(cq, false);

        Collections.sort(functionList, new NumberComparator());
        List<Map<String, Object>> menuList = new ArrayList<Map<String, Object>>();
        if (functionList.size() > 0) {
            Map<String, Object> map = null;
            String sql = null;
            Object[] params = null;
            for (int i = 0; i < functionList.size(); i++) {
                map = new HashMap<String, Object>();
                map.put("id", functionList.get(i).getId());
                map.put("name", functionList.get(i).getFunctionName());
                map.put("code", functionList.get(i).getFunctionUrl());
                if (StringUtils.isNotBlank(parentFuncId)) {
                    map.put("pId", parentFuncId);
                } else {
                    map.put("pId", "1");
                }
                // 根据id判断是否有子节点
                sql = "select count(1) from T_S_FUNCTION t where t.PARENTFUNCTIONID = ?";
                params = new Object[] { functionList.get(i).getId() };
                long count = this.systemService.getCountForJdbcParam(sql, params);
                if (count > 0) {
                    map.put("isParent", true);
                }
                menuList.add(map);
            }
        }

        net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(menuList);
        j.setMsg(jsonArray.toString());
        return j;
    }

该方法是从数据表中查询菜单信息并转为json传给前台.

当parentFuncId为空即初始时查询的是一级菜单, 当不为空时即前台点击某个节点将该节点id传到后台查询该节点下的子节点信息同样转为json传给前台.

这么着一看也没太复杂, 接下来看一下通过Vue.js加载树.

效果:https://refined-x.com/Vue-Giant-Tree/

源码:https://github.com/tower1229/Vue-Giant-Tree

感谢

http://www.treejs.cn/v3/api.php

posted @ 2019-10-09 17:03 习惯沉淀阅读(1163) 评论(0) 编辑收藏举报

刷新页面返回顶部

习惯沉淀

闻道有先后术业有专攻 Fork me on GitHub

jQuery的zTree插件

写在前面

关键代码

jsp代码解读

java代码解读

感谢

http://www.treejs.cn/v3/api.php

公告

习惯沉淀

闻道有先后 术业有专攻 Fork me on GitHub

jQuery的zTree插件

写在前面

关键代码

jsp代码解读

java代码解读

感谢

http://www.treejs.cn/v3/api.php

公告

闻道有先后术业有专攻 Fork me on GitHub