ztree项目中实战

传奇1949

于 2019-05-23 10:58:03 发布

阅读量311

点赞数

分类专栏：前端文章标签： ztree

本文链接：https://blog.csdn.net/java0311/article/details/90476374

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

废话不多说，直接贴核心代码：


<style type="text/css">
    ul.ztree {
        margin-top: 10px;
        border: 1px solid #617775;
        background: #f0f6e4;
        width: 220px;
        height: 360px;
        overflow-y: scroll;
        overflow-x: auto;
    }
</style>
<div>
      <div>
        <ul class="list">
            <li class="title">&nbsp;&nbsp;道路: <input id="roadSel" type="text" readonly value="" style="width: 350px;" onclick="showRoad();" />
        </ul>
    </div>
    <div id="roadTreeContent" class="menuContent" style="display: none; position: absolute;background: #f9f9f9;z-index: 10">
        <ul id="roadTree" class="ztree" style="margin-top: 0; width: 300px; height: 300px;"></ul>
    </div>

    
</div>

<script>
    var setting = {
        async: {
            enable: true,
            url: "${adminPath}/roadInfo/getRoadInfoList",
            autoParam: ["id"],
            type:"GET",
            dataType: "JSON",
            dataFilter : function(treeId, parentNode, childNodes) {
                for (var i=0; i<childNodes.length; i++) {
                    if(childNodes[i].pId=="0" || childNodes[i].pId=="1"){
                        childNodes[i].isParent = true;
                    }else{
                        childNodes[i].isParent = false;
                    }
                }
                return childNodes;
            }
        },
        check: {
            enable: true,
            chkboxType: { "Y" : "ps", "N" : "ps" }
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };

    $(document).ready(function(){

        $.fn.zTree.init($("#roadTree"), setting);
    });


    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("roadTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("roadTree"),
            nodes = zTree.getCheckedNodes(true),
            v = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#roadSel");
        cityObj.attr("value", v);
    }

    function showRoad() {
        var cityOffset = $("#roadSel").offset();
        $("#roadTreeContent").css({left:cityOffset.left/1.35 + "px", top:cityOffset.top/  + "px"}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideTree() {
        $("#roadTreeContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "roadSel" || event.target.id == "roadTreeContent" || $(event.target).parents("#roadTreeContent").length>0)) {
            hideTree();
        }
    }


   
</script>