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