zTree

zTree

　　　　　　2019-03-06

 

官方：http://www.treejs.cn/v3/main.php

資源：https://pan.baidu.com/s/1lUngPex42A4cnU4DN-GPxw     分享碼：lspw

 

使用：

　　1.引入css、js

　　2.html:

<div class="span12">
    <div class="zTreeDemoBackground">
        <ul class="list">
            <li class="title" onclick="showMenu(); return false;">
                <input id="citySel" type="text"/>
            </li>
        </ul>
    </div>
                            
<!-- zTree樹顯示部分 -->
    <div id="menuContent" class="menuContent">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>    

　　js:

　　

//zTree的樹初始設置
    var setting = {
            view: {
                dblClickExpand: false,
                fontCss: getFontCss
            },
            data: {
                simpleData: {
                    enable:true,
                    idKey:"id",
                    pIdKey: "parentId",//設置上下級對應字段，知足idKey=pIdKey即爲上下級關係
                    title: "companyNumber",//鼠標懸停的顯示
                },
            },
            async: {
                enable: true,
                url:"/bhSet/getOrgNodesByOrgType",
                autoParam:["id", "name", "level"],
                otherParam:{"orgType":"1"},//自定義參數
                dataFilter: filter
            },
            callback: {//回調函數
                beforeClick: beforeClick,
                onClick: onClick,
                onCheck: zTreeOnCheck
            },
            check: {
                enable:true,//開啓checkbox模式
                chkboxType:{ "Y" : "", "N" : "" }//父級結點與子節點選中關聯規則
            }
        };
    
    
    //zTree樹初始化
    $.fn.zTree.init($("#treeDemo"), setting);