<body>
<div class="container" style="height: 100%; width: 100%; margin: 0; padding: 0;">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
组织机构树
</h3>
</div>
<div class="panel-body">
<ul id="ztreePanel" class="ztree" ></ul>
</div>
</div>
</div>
<div class="col-md-8 col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
职员管理
</h3>
</div>
<div class="panel-body">
<table id="userorgtable"></table>
</div>
</div>
</div>
</div>
</body>
<script>
//js获取从springmvc中传来的变量selectids
Ids = '${selectids}';
if(Ids){
selectionIds=Ids.substring(1, Ids.length - 1 ).split(","); //设置一下全局变量，这个表示的是获取每行被选中的id数组
}else{
selectionIds=[];
}
/*初始化table数据*/
$(function(){
initTable('${pageContext.request.contextPath}/platform/system/sysUser/getPagedUsers.ht');
});
//请求服务数据时所传参数
function userorgqueryParams(params){
return{
pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
pageNo: params.offset / params.limit + 1//当前页面,默认是上面设置的1(pageNumber)
}
}
//请求成功方法
function userorgresponseHandler(result){
if( $.type(result) == "object"){
var json_result = JSON.parse(JSON.stringify(result));
}else{
var json_result = JSON.parse(result);
}
//遍历result.rows，如果已经在已选数组中，则勾选前面的复选框
$.each(json_result.rows, function (i, row) {
row.checkStatus = $.inArray(row.userId.toString(), selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
});
return {
total : json_result.total, //总页数,前面的key必须为"total"
rows : json_result.rows //行数据，前面的key要与之前设置的dataField的值一致.
};
};
//监听表格行点击事件
$("#userorgtable").on('click-row.bs.table', function (e, row, element){
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
//var index = $("#userorgtable").find('tr.success').data('index');//获得选中的行的id
selectRow = row;
});
$(document).ready(function(){
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/platform/system/sysOrg/getAllemp.ht",
data: {},
dataType: "json",
success: function(data){
for(var k = 0; k < data.length; k++){
data[k].name = data[k].orgName;
}
$.fn.zTree.init($("#ztreePanel"), setting, data);
//加载的时候要展开所有节点
var treeObj = $.fn.zTree.getZTreeObj("ztreePanel");
treeObj.expandAll(true);
},
error: function(){
}
});
});
var setting = {
check:{
enable:false
},
data: {
simpleData: {
enable:true,
idKey: "orgId",
pIdKey: "orgSupId",
rootPId: ""
}
},
view: {
selectedMulti: false// 禁止多点同时选中的功能
},
callback: {
onClick: function(event,treeId, treeNode) {
$("#userorgtable").bootstrapTable('destroy');
initTable('${pageContext.request.contextPath}/platform/system/sysUser/getEmployeeBySelectedOrg.ht?orgId='+treeNode.orgId);
$("#userorgtable").bootstrapTable('refresh');
},
}
};
function initTable(url){
$("#userorgtable").bootstrapTable({
url: url,
method: 'post',
contentType: "application/x-www-form-urlencoded", //在post请求的时候要写上，否则服务器request接收不到传参.get好像不是必须加上
dataType: "json",
//height: 355, //是一个数字，不带px单位
//striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
//dataField: "data", 这是返回的json数组的key.默认好像是"rows",这里换成了data.这里只有前后端约定好就行
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pagination: true, //分页
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 4, //每页的记录行数（*）
///totalRows: 5,
//pageList: [5, 10, 25, 50], //可供选择的每页的行数（*）
queryParams:userorgqueryParams, //请求服务器时所传的参数
responseHandler:userorgresponseHandler, //请求数据成功后，渲染表格前的方法
//search: true, //显示搜索框。在javaScript中写search相当于在<table>标签中写data-search="true"
clickToSelect: true, //是否启用点击选中行
//singleSelect: true, //最多只能选中一行
columns: [{
field: 'checkStatus',
checkbox: true, //给复选框添加一个属性
},{
field: 'userId',
title: 'userId',
align: 'center',
valign: 'middle',
width: '10%',
visible: false
}, {
field: 'fullname',
title: '姓名',
align: 'center',
valign: 'middle',
width: '50%'
}, {
field: 'phone',
title: '联系方式',
align: 'center',
valign: 'middle',
width: '40%'
} ]
});
}
//选中事件时操作数组
var union = function(array, ids){
$.each(ids, function (i, id) {
if($.inArray(id,array)==-1){
array[array.length] = id;
}
});
return array;
};
//取消选中事件操作数组
var difference = function(array, ids){
$.each(ids, function (i, id) {
var index = $.inArray(id,array);
mark=index;
if(index!=-1){
array.splice(index, 1);
}
});
return array;
};
//绑定选中事件、取消事件、全部选中、全部取消
$("#userorgtable").on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows, element) {
var _ = {"union":union, "difference":difference};
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
return row.userId;
});
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
//将最后的结果填入selectionIds数组中
selectionIds = _[func](selectionIds, ids);
})
</script>
</body>