實現效果：
界面代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Index</title>
<link href="~/Content/bootstrapStyle/bootstrapStyle.css" rel="stylesheet" />
<script src="~/Content/js/jquery-2.1.4.js"></script>
<script src="~/Content/js/jquery.ztree.core.js"></script>
<script src="~/Content/js/jquery.ztree.excheck.js"></script>
<script src="~/Content/js/jquery.ztree.exedit.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<!-- 引入bootstrap-table -->
<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table.min.js"></script>
<script src="~/Content/bootstrap-table-zh-CN.min.js"></script>
<style>
.showbox {
position: absolute;
border: 1px solid #d2d2d2;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
padding: 10px 10px 10px 10px;
position: absolute;
z-index: 66666666;
margin: 5px 0;
border-radius: 2px;
min-width: 530px;
height: 400px;
}
</style>
</head>
<body>
<input class="" id="showid">
<div class="showbox">
<div style="width: 100%; height: 32px;text-align:right;">
<button id="close">關閉</button>
</div>
<div style="width: 30%; float: left; border: 1px solid #d2d2d2; height: 340px; overflow: auto;">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div style="width: 68%; border: 1px solid #d2d2d2; height: 340px; float: right; overflow: auto;">
<table id="table" style="height: 100%;"></table>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".showbox").hide();
})
$("#showid").click(function () {
var t = $("#showid").offset().top + $("#showid").outerHeight() + "px";
var l = $("#showid").offset().left + "px";
$(".showbox").css({ top:t, left: l});
$(".showbox").show();
})
//點擊其他區域關閉
$(document).mouseup(function (e) {
var userSet_con = $(".showbox");
if (!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0) {
$(".showbox").hide();
}
});
$(function () {
$.post("/home/index", function (data) {
var setting = {
check: {
enable: false,
},
data: {
simpleData: {
enable: true,
idKey: 'id'
}
},
callback: {
onClick: function (event, treeId, treeNode) {
parent_id = treeNode.id;
//選擇部門更換數據
$("#table").bootstrapTable('refresh', { query: { id: parent_id } });
}
},
};
var zNodes = [
{ id: 1, pId: 0, name: "xx部門", open: true },
{ id: 101, pId: 1, name: "部門1" },
{ id: 102, pId: 1, name: "部門2" },
{ id: 103, pId: 1, name: "部門3" },
{ id: 104, pId: 1, name: "部門4" },
{ id: 2, pId: 0, name: "xxxx部門", open: false },
{ id: 201, pId: 2, name: "部門1" },
{ id: 206, pId: 2, name: "部門2" },
{ id: 207, pId: 2, name: "部門3" },
];
var nodetree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
nodetree.expendAll(true);//全部展開
})
});
$("#table").bootstrapTable({ // 對應table標簽的id
url: "../Content/usersList.json", // 獲取表格數據的url
method: 'get',
striped: true, //表格顯示條紋，默認為false
pagination: false, // 在表格底部顯示分頁組件，默認false
dataType: "json",
sortOrder: 'desc',
columns: [
{
checkbox: true, // 顯示一個勾選框
align: 'center' // 居中顯示
}, {
field: 'userName', // 返回json數據中的name
title: '用戶名', // 表格表頭顯示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'userSex',
title: '性別',
align: 'center',
valign: 'middle'
}
],
onCheck: function (rows) {
getselect();
},
onUncheck: function (rows) {
getselect();
},
onCheckAll: function (rows) {
getselect();
},
onUncheckAll: function (rows) {
getselect();
},
})
//關閉
$("#close").click(function () {
$(".showbox").hide();
})
//獲取數據賦值文本框
function getselect()
{
var rows = $("#table").bootstrapTable('getSelections');
var arrays = new Array();// 聲明一個數組
$(rows).each(function () {
arrays.push(this.userName);
});
var idcard = arrays.join(','); // 獲得要刪除的id
$("#showid").val(idcard);
}
</script>
</body>
</html>