Bootstrap Modalポップアップで入力ボックスで選択した内容はツリー(ZTree)のノードです
に注意
Bootstrapのモダリティボックスを呼び出すと、JQが取得した位置は現在のコンテンツ領域に対する位置である
コード#コード#
Bootstrapのモダリティボックスを呼び出すと、JQが取得した位置は現在のコンテンツ領域に対する位置である
コード#コード#
<div id="registerNetModal" class="modal fade" tabindex="-1" >
...
<div class="f-mt20"><h4> :h4><hr class="line"> div>
<div class="flex">
<div class="f-fl f-mr15">
<label for="" class="w105 f-ib"><span class="red">*span> :label>
<input type="text" id="treeInfo" class="u-input input240 f-mr15 " placeholder="">
<button id="menuBtn" class="u-btn normal selectInfo" title=" "> button>
<span class="s-tip lt80">span>
div>
<div id="menuContent" class="menuContent"
style="display:none; position: absolute;z-index: 1200;background-color: rgb(4, 66, 144);box-shadow: 0 0 15px rgba(0,0,0,0.1);">
<ul id="treeDemo" class="ztree" style="margin-top:0; width:240px;height: 180px;overflow-y: auto;">ul>
div>
div>
...
div>
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
// beforeCheck: beforeCheck,
onCheck: onCheck
}
};
var zNodes = [
{ id: 1, pId: 0, name: " " },
{ id: 2, pId: 0, name: " " },
{ id: 3, pId: 0, name: " " },
{ id: 6, pId: 0, name: " " },
{ id: 4, pId: 0, name: " ", open: true, nocheck: true },
{ id: 41, pId: 4, name: " " },
{ id: 42, pId: 4, name: " " },
{ id: 43, pId: 4, name: " " },
{ id: 44, pId: 4, name: " " },
{ id: 5, pId: 0, name: " ", open: true, nocheck: true },
{ id: 51, pId: 5, name: " " },
{ id: 52, pId: 5, name: " " },
{ id: 53, pId: 5, name: " " },
{ id: 54, pId: 5, name: " " },
{ id: 6, pId: 0, name: " ", open: true, nocheck: true },
{ id: 61, pId: 6, name: " " },
{ id: 62, pId: 6, name: " " },
{ id: 63, pId: 6, name: " " },
{ id: 64, pId: 6, name: " " }
];
function beforeCheck(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true);
console.log(nodes)
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 = $("#treeInfo");
cityObj.attr("value", v);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu();
}
}
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$(".selectInfo").on("click", function () {
var cityObj = $("#treeInfo");
var cityPosition = $("#treeInfo").position();
var cityOffset = $("#treeInfo").offset();
// 60
$("#menuContent").css({ left: cityPosition.left + "px", top: cityOffset.top-60 + "px" }).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
})