bootstrap modal加树状图

1.布局代码

<div id="myBedinfoModal" class="modal modal-dialog fade modal-lg" tabindex="-1" data-focus-on="input:first">
        <div class="modal-header">
            <div class="row">
                <div class="col-md-2 pull-right">
                    <button type="button" class="btn blue" data-dismiss="modal">关闭</button>
                </div>
                <div class="col-md-4">
                    <h4 class="modal-title">选择房间</h4>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-8" style="border:1px solid #000">
                    <div id="treebuildingNode" class="ztree"></div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn blue confirm">确定</button>
            <button type="button" class="btn default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn blue clear">清除</button>
        </div>
    </div>

2.js代码

function getBedinfoList(tempbuilding, temroomnumber) {
    var url = ...;
    var result = {data: []};
    $.ajax({
        url: url,
        type: "GET",
        async: false,
        dataType: "json",
        data: {"building": tempbuilding, "roomnumber": temroomnumber},
        timeout: 800000,
        success: function (re) {
            result = re;
        },
        error: function () {

        }

    });
    return result;
}

function showBedinfoModal() {
    $mymodal = $("#myBedinfoModal");
    var setting = {
        view: {selectedMulti: false},
        check: {enable: false, nocheckInherit: true},
        async: {
            enable: true, // 设置 zTree是否开启异步加载模式  加载全部信息
            url: "", // Ajax 获取数据的 URL 地址
            autoParam: ["id", "name"],    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
            //dataFilter: filter
        },
        callback: {
            onClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treebuildingNode");
                var ztbuilding = "";
                var ztroomnumber = "";
                var selNodeary = zTree.getSelectedNodes();
                var selNode = selNodeary[0];
                if (!selNode.isParent) {
                    ztroomnumber = selNode.name; //房间号
                    var parnode = selNode.getParentNode();
                    ztbuilding = parnode.getParentNode().name; //楼宇号
                    var roomInfo = ztbuilding + '-' + ztroomnumber;
                    $('#roominfoId').val(roomInfo);
                    var bedinfolist = getBedinfoList(ztbuilding, ztroomnumber);
                    console.log(bedinfolist);
                    for (var i = 0; i < bedinfolist.length; i++) {
                        var building = bedinfolist[i].building,
                            roomNumber = bedinfolist[i].roomnumber;
                        if(building === ztbuilding && roomNumber === ztroomnumber) {
                            var roomId = bedinfolist[i].roomnumberid;
                            $('#roomId').val(roomId);
                        }
                    }
                }
            }
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id", // id编号命名 默认
                pIdKey: "pId", // 父id编号命名 默认
                rootPId: 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
            }
        }
    };
    $.ajax({
        type: "GET",
        url:  ...,
        data: {},
        dataType:"json",
        success: function(data){
            var treebedOrg = $.fn.zTree.init($("#treebuildingNode"), setting, data.data);
            //treebedOrg.expandAll(true);
        }
    });
    //var treebedOrg = $.fn.zTree.init($("#treebuildingNode"), setting, parentArray);
    //treebedOrg.expandAll(true);
    $mymodal.on('shown.bs.modal',function(e){
        $mymodal.css({
            'margin-top': function () {
                var preTop = $('#myBedinfoModal').css('margin-top');
                preTop = parseInt(preTop);
                var top = $('#myBedinfoModal').position().top;
                var minus = top + preTop;
                if(top+preTop < 60){
                    return preTop + (60 - top - preTop);
                }
            }
        });
    });

    $mymodal.modal({width: 400}).off('click', '.confirm').on('click', '.confirm', function (e) {
        $mymodal.modal('hide');
    });
}