树形二级联动（ztree+bootstrap-select）

工作需要，然后就继续做新的东西，现在就需要一个二级联动，并且需要是树形的，支持搜索的功能
我网上查了查决定用ztree树形，加上bootstrap-select这个支持搜索的表单插件，好的，代码如下
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE>select</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
    <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="dist/css/bootstrap-select.css">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" defer></script>
    <script src="dist/js/bootstrap-select.js" defer></script>
    <script src="js/ceshi.js"></script>

</HEAD>
<BODY>
<h1>ztree+bootstrap-select</h1>
<div class="content_wrap" style="margin:0 auto;">
    <div class="zTreeDemoBackground  list2" >
        <ul class="list list1" >
            <li class="title title2">&nbsp;&nbsp;一级选择: <input id="citySel" type="text" readonly value="一级选择" style="width:120px;" onclick="showMenu();" /></li>
            <form class="form-inline  width: 120px;
    height: 25px;">
                <div class="form-group">
                    <label class="col-md-1 control-label" for="lunchBegins">二级选择：</label>
                </div>
                <div class="form-group">
                    <select id="lunchBegins" class="selectpicker select1" data-live-search="true" data-live-search-style="begins" title="全部">
                        <!--<option>1</option>-->
                        <!--<option>2</option>-->
                    </select>
                </div>
            </form>
        </ul>
    </div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
<script>
    <!--
    var setting = {
        view: {
            showIcon: showIconForTree,
            showLine:false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: 0
            }
        },
        callback: {
            onClick:onClick
        }
    };
    function showIconForTree(treeId, treeNode) {
        return !treeNode.isParent;
    };
    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getSelectedNodes(),
            v = "";
        nodes.sort(function compare(a, b) {
            return a.id - b.id;
        });
        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 = $("#citySel");
        cityObj.attr("value", v);
        for (var i = 0; i < nodes.length; i++) {
            v = nodes[i].name + ",";
            var nid = nodes[i].id;
        }

        for(var i = 0 ; i < zNodes.length; i++){
            // console.log(i,"类型："+typeof i,zNodes[i]);
            var node=zNodes[i];
        }
        var nid=nid+"";

        var options = "";

        $.each(zNodes,function(i,v){
            if(v.pId == nid){
                options+="<option>"+v.name+"</option>";
            }
        });
        $("#lunchBegins").html(options);
        $('#lunchBegins').selectpicker('refresh');

    }
        var options = "";

        $.each(zNodes,function(i,v){
            options+="<option>"+v.name+"</option>";
        });
        $("#lunchBegins").html(options);

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        // $("#menuContent2").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
    
</script>
</BODY>
</HTML>
已上传到GitHub，这里是 演示地址
树形二级联动（ztree+bootstrap-select）

猜你喜欢
