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);