jQuery的zTree插件

時間 2019-11-05

原文原文鏈接

寫在前面

jQuery的 zTree插件javascript

關鍵代碼

<%@ 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 申明php

<!DOCTYPE html >

2.zTree 的容器 className 設置爲 "ztree"css

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

3.而後看js部分html

3.1頁面初始化執行代碼java

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

init方法爲 zTree 初始化方法，建立 zTree 必須使用此方法

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

二、須要首先加載 jquery-1.4.2.js 或其餘更高版本的 jQuery 。

三、須要加載 jquery-ztree.core-3.0.js，若是須要用到 編輯功能 或 checkbox / radio 還須要分別加載 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。

四、須要加載 zTreeStyle.css 以及 zTreeStyle 目錄下的 img 文件。

五、若是須要使用自定義圖標請參考相應的Demo。

六、請注意設置 zTree 的容器樣式 class="ztree"，其中 "ztree" 這個 className，能夠根據須要隨意修改，別忘了修改 css 中對應名字就是了，對於容器若是須要增長其餘特殊樣式，可根據本身的須要進行修改。

該init方法參數說明(obj, zSetting, zNodes)三個參數
jquery

objjQuery Object
用於展示 zTree 的 DOM 容器

zSettingJSON
zTree 的配置數據，具體請參考 「setting 配置詳解」中的各個屬性詳細說明

zNodesArray(JSON) / JSON
zTree 的節點數據，具體請參考 「treeNode 節點數據詳解」中的各個屬性詳細說明

一、v3.x 支持單獨添加一個節點，即若是隻新增一個節點，不用必須包在數組中

二、若是須要異步加載根節點，能夠設置爲 null 或 [ ]

三、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明

返回值JSON
zTree 對象，提供操做 zTree 的各類方法，對於經過 js 操做 zTree 來講必須經過此對象

若是不須要自行設定全局變量保存，能夠利用 $.fn.zTree.getZTreeObj 方法隨時獲取

3.2節點展開執行方法即setting中設置的callback函數zTreeOnExpandgit

該回調函數共有三個參數(event, treeId, treeNode)github

參數說明sql

eventjs event 對象
標準的 js event 對象

treeIdString
對應 zTree 的 treeId，便於用戶操控

treeNodeJSON
被展開的節點 JSON 數據對象

被展開的節點json對象能夠獲取到該節點id, 傳到後臺經過判斷該節點是否爲父節點(便是否有子節點), 若是有子節點則後臺查詢出的子節點信息由前臺接收後經過addNodes方法添加子節點.或經過reAsyncChildNodes方法強行異步加載父節點的子節點(parentNode, reloadType, isSilent, callback)json

addNodes方法參數說明(parentNode, [index], newNodes, isSilent)

parentNodeJSON
指定的父節點，若是增長根節點，請設置 parentNode 爲 null 便可。

請務必保證此節點數據對象 是 zTree 內部的數據對象

[index]Number
新節點插入的位置（從 0 開始）

index = -1 時，插入到最後

此參數可忽略

v3.5.19+

newNodesJSON / Array(JSON)
須要增長的節點數據 JSON 對象集合，數據只須要知足 zTree 的節點數據必需的屬性便可，詳細請參考「treeNode 節點數據詳解」

一、v3.x 支持單獨添加一個節點，即若是隻新增一個節點，不用必須包在數組中

二、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明

isSilentBoolean
設定增長節點後是否自動展開父節點。

isSilent = true 時，不展開父節點，其餘值或缺省狀態都自動展開。

返回值Array(JSON)
返回值是 zTree 最終添加的節點數據集合

若是 newNodes 是單個節點數據 JSON，返回值也是將其包在 Array 內

請務必記住：返回值中的數據對象 是 newNodes 被 clone 後的，因此絕對不相等！

reAsyncChildNodes方法參數說明(parentNode, reloadType, isSilent, callback)

parentNodeJSON
指定須要異步加載的父節點 JSON 數據

一、parentNode = null 時，至關於從根節點 Root 進行異步加載

二、parentNode.isParent = false 時，不進行異步加載

三、請務必保證此節點數據對象 是 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;
    }