jQuery zTree 展示樹形表格

weixin_33806914發表於2019-01-27
jQuery

jQuery zTree 展示樹形表格

基本測試Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標準資料格式</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>
    <script type="text/javascript">
        var setting = {
            //顯示覆選框
            check: {
                enable: true
            },
            /*
            //顯示單選框
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "level"
            },
            */
        };
        var zNodes =[
            { name:"父節點1 - 展開", open:true,
                children: [
                    { name:"父節點11 - 摺疊",
                        children: [
                            { name:"葉子節點111"},
                            { name:"葉子節點112"},
                            { name:"葉子節點113"},
                            { name:"葉子節點114"}
                        ]},
                    { name:"父節點12 - 摺疊",
                        children: [
                            { name:"葉子節點121"},
                            { name:"葉子節點122"},
                            { name:"葉子節點123"},
                            { name:"葉子節點124"}
                        ]},
                    { name:"父節點13 - 沒有子節點", isParent:true}
                ]},
            { name:"父節點2 - 摺疊",
                children: [
                    { name:"父節點21 - 展開展開展開展開", open:true, checked:true,
                        children: [
                            { name:"葉子節點211"},
                            { name:"葉子節點212"},
                            { name:"葉子節點213"},
                            { name:"葉子節點214"}
                        ]},
                    { name:"父節點22 - 摺疊",
                        children: [
                            { name:"葉子節點221"},
                            { name:"葉子節點222"},
                            { name:"葉子節點223"},
                            { name:"葉子節點224"}
                        ]},
                    { name:"父節點23 - 摺疊",
                        children: [
                            { name:"葉子節點231"},
                            { name:"葉子節點232"},
                            { name:"葉子節點233"},
                            { name:"葉子節點234"}
                        ]}
                ]},
            { name:"父節點3 - 沒有子節點", isParent:true}
        ];

        $(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>

顯示選擇的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標準資料格式</title>
     ....省略
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
    <button id="settingBtn">許可權設定</button>
</div>
<script>
    $("#settingBtn").click(function () {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var v = "";
        for(var i=0;i<nodes.length;i++) {
            v += nodes[i].id+"_"+nodes[i].name + ",";
            //console.log("節點id:" + nodes[i].id + "節點名稱" + v); //獲取選中節點的值
        }
        alert(v);
    });
</script>
</body>
</html>

相關文章