展現樹菜單(zTree)

時間 2019-11-09

標籤展現菜單 ztree 简体版

原文原文鏈接

zTree是一個依靠 jQuery 實現的多功能「樹插件」，支持選擇框等顯示，動態更改圖標，提供多種事件響應回調，並且異步數據功能強大。相信涉及大型項目或者大量數據時，它的使用將很是方便。
利用ztree和Dwr框架能夠輕鬆的實現後臺數據的異步加載，他們都是利用Ajax進行後臺數據的異步刷新的，頁面不會從新加載，並且速度很是快
兼容 IE、FireFox、Chrome 等瀏覽器
　　• 在一個頁面內可同時生成多個 Tree 實例
　　• 支持 JSON 數據
　　• 支持一次性靜態生成和 Ajax 異步加載兩種方式
　　• 支持多種事件響應及反饋
　　• 支持 Tree 的節點移動、編輯、刪除
　　• 支持任意更換皮膚 / 個性化圖標（依靠css）
　　• 支持極其靈活的 checkbox 或 radio 選擇功能
　　• 簡單的參數配置實現靈活多變的功能javascript

demo只是展現樹菜單,不包含增刪css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <!--引入相關css和js文件-->
    <link rel="stylesheet" href="../ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../ztree/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="../ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

    <script type="text/javascript">
        // 初始化ztree參數
        var zTreeObj;
        var setting = {
            check : {
                enable : true
            },
            data : {
                keep : {
                    parent : true
                },
                simpleData : {
                    enable : true
                }
            }
        };

        // 後臺查詢ztree數據,以json什麼時候返回
        $(document).ready(function() {
            /*$.post(
                    "ztreeAction.action",
                    {"id":"${id}"},
                    function(data){
                        zTreeObj = $.fn.zTree.init($('#ztree'), setting, data);    //rmTree 樹的id，支持多個樹
                        zTreeObj.expandAll(true);        //展開全部樹節點
                    },
                    "json");
            */
            var data = [
                {"id":"100","pId":"", "isParent":"true","name":"100","checked":"true"},
                {"id":"100100","pId":"100", "isParent":"true","name":"100100","checked":"true"},
                {"id":"100100100","pId":"100100", "isParent":"false","name":"100100100","checked":"true"},
                {"id":"200","pId":"", "isParent":"true","name":"200","checked":"true"},
                {"id":"200100","pId":"200", "isParent":"true","name":"200100","checked":"true"},
                {"id":"200101","pId":"200", "isParent":"false","name":"200101","checked":"true"},
                {"id":"200100100","pId":"200100", "isParent":"false","name":"200100100","checked":"true"},
                {"id":"200100101","pId":"200100", "isParent":"false","name":"200100101","checked":"false"}
            ];
            zTreeObj = $.fn.zTree.init($('#ztree'), setting, data); //rmTree 樹的id，支持多個樹
            zTreeObj.expandAll(true); //展開全部樹節點
        });

        //獲取全部選擇的節點
        function submitCheckedNodes() {
            var nodes = new Array();
            nodes = zTreeObj.getCheckedNodes(true);        //取得選中的結點
            var str = "";
            for (i = 0; i < nodes.length; i++) {
                if (str != "") {
                    str += ",";
                }
                str += nodes[i].id;
            }

            $('#xIds').val(str);
            alert($('#xIds').val());
        }
    </script>
</head>
<body>
    <form action="" method="post">
        <input hidden="hidden" type="text" id="xIds" name="xIds" value="">
        <div>
            <ul id="ztree" class="Chart ztree">

            </ul>
        </div>
        <input type="button" onclick="submitCheckedNodes()" value="檢查勾選的節點">
    </form>
</body>
</html>

結果展現html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。