怎么点击左边的树形部门，然后显示右边的用户，这前端是通过接口的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>用户管理列表</title>
<link href="../styles/common/app.css" rel="stylesheet"/>
<link href="../styles/common/form.css" rel="stylesheet">
<link href="../styles/common/common.css" rel="stylesheet"/>
</head>
<body id="wrapper" style="background-color: #f0f2f5;">
<div class="ui-page-loading"></div>
<div data-options="region:'north',split:false,border:false" style="height: 100px;padding: 10px;background-color: transparent;">
<div id="northBox" style="background-color: white; padding:0 10px;">
<form id="mainForm" class="ui-form">
<div class="row row-start">
<div class="col4">
<div class="field">
<label class="label">查询</label>
</div>
<div class="control">
<input id="blurry" name="blurry" type="text" style="width:100%;" />
</div>
</div>
<div class="col4">
<div class="field">
<label class="label">创建开始日期</label>
</div>
<div class="control">
<input id="startTime" name="createTime" type="text" style="width:100%;" />
</div>
</div>
<div class="col4">
<div class="field">
<label class="label">创建结束日期</label>
</div>
<div class="control">
<input id="endTime" name="createTime" type="text" style="width:100%;" />
</div>
</div>
<div class="col4 search-button">
<div class="ui-space">
<div class="ui-space-item">
<a href="javascript:void(0);" id="btnReset" class="btn" data-options="">重 置</a>
</div>
<div class="ui-space-item">
<a href="javascript:void(0);" id="btnQuery" class="btn btn-primary" data-options="">查 询</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div data-options="region:'west',split:false,border:false" style="width:245px;padding:0 10px 10px 10px;background-color: transparent;">
<table id="dg"></table>
</div>
<div data-options="region:'center',split:false,border:false" style=" padding:0 10px 10px 0; background-color:transparent;">
<div class="ui-hide">
<form id="subForm">
<input type="hidden" id="userID" name="id" value="-1" />
</form>
</div>
<table id="subdg"></table>
</div>
<div id="toolbar" class="ui-toolbar">
<div class="ui-toolbar-title">部门列表</div>
<div class="ui-toolbar-options">
<div class="ui-space">
</div>
</div>
</div>
<div id="subToolbar" class="ui-toolbar">
<div class="ui-toolbar-title">用户管理列表</div>
<div class="ui-toolbar-options">
<div class="ui-space">
<div class="ui-space-item">
<a id="create" href="javascript:void(0);" class="btn btn-primary" data-options="">新建</a>
</div>
<div class="ui-space-item">
<a id="update" href="javascript:void(0);" class="btn" data-options="">编辑</a>
</div>
<div class="ui-space-item">
<a id="del" href="javascript:void(0);" class="btn" data-options="">删除</a>
</div>
<div class="ui-space-item">
<a id="export" href="javascript:void(0);" class="btn" data-options="">导出</a>
</div>
</div>
</div>
</div>
<script src="../scripts/app.js" type="text/javascript"></script>
<script src="../scripts/common.js" type="text/javascript"></script>
<script src="../scripts/userList.js" type="text/javascript"></script>
<script src="../scripts/plugins/moment.min.js" type="text/javascript"></script>
</body>
</html>
$.pageLoad(function () {
UserList.init();
});
var UserList = {
init: function () {
var self = this;
self.initControls();
},
initControls: function () {
var self = this;
$('#wrapper')._layout({
border: false,
fit: true
});
$('#northBox')._panel({
border: true,
fit: true
});
$('#mainForm')._form();
$('#subForm')._form();
$('#blurry')._textbox({
prompt:'请输入用户名称、昵称或电子邮件',
searcher:function (value,name) {
$('#subdg').datagrid('load')
}
});
$('#startTime')._datetimebox({
onChange: function (newVal, oldVal) {
if ($.isNullOrEmpty(newVal)) {
return;
}
//var v =$('#startTime').datetimebox('getValue');
var d = moment(newVal, "YYYY-MM-DD hh:mm:ss").toDate();
$('#endTime').datetimebox('calendar').calendar({
validator: function (date) {
return d < date;
}
});
}
});
$('#userID')._textbox({
});
$('#endTime')._datetimebox({
onChange: function (newVal, oldVal) {
if ($.isNullOrEmpty(newVal)) {
return;
}
//var v =$('#endTime').datetimebox('getValue');
var d = moment(newVal, "YYYY-MM-DD hh:mm:ss").toDate();
$('#startTime').datetimebox('calendar').calendar({
validator: function (date) {
return d > date;
}
});
}
});
$('#btnReset')._linkbutton({
onClick: function () {
self.reset();
}
});
$('#btnQuery')._linkbutton({
onClick: function () {
self.load();
}
});
$('#create')._linkbutton({
onClick: function () {
self.create();
}
});
$('#update')._linkbutton({
onClick: function () {
self.update();
}
});
$('#del')._linkbutton({
onClick: function () {
self.del();
}
});
$('#export')._linkbutton({
onclick:function (){
self.export();
}
});
//var id = $.request('id');
$('#dg')._treegrid({
fit: true,
rownumbers: true,
pagination: false,
fitColumns: true,
striped: true,
singleSelect: true,
toolbar: '#toolbar',
pageSize: null,
idField: 'id',
treeField: 'name',
emptyMsg: '暂无记录',
url:'../api/dept/',
loader: function (param, success, error) {
var getInput = self.getQueryData(param);
//console.log(getInput);
$.ajax({
showLoading: false,
url: '../api/dept/',
type: 'GET',
data: getInput,
contentType: 'application/json',
headers: {
Authorization: $.cookie('EL-ADMIN-TOEKN')
},
success: function (data) {
//var d = self.helper.parseTreeData('data.content', 'id', 'pid', null);
//state: "open" state: "closed" hasChildren: true
$.each(data.content, function (i, n) {
if (n.hasChildren) {
n.state = "closed";
} else {
n.state = "open";
}
});
success({ total: data.totalElements, rows:data.content});
/*
if (param.hasOwnProperty('id')) {
var row = $()
$(this).treegrid('append', {
parent: row[opts.idField],
data: row.children1
});
row.children1 = undefined;
tg.treegrid('expand', row[opts.idField]);
} else {
success({total: data.totalElements, rows: data.content});
}*/
},
error: error,
});
},
columns: [[
{field: 'name', title: '部门名称', width: 15}
]],
onselect: function (index, row) {
if (row) {
$('#userID').val(row.id);
$('#subdg').datagrid('load');
}
}
})
$('#subdg')._datagrid({
fit: true,
rownumbers: true,
pagination: true,
fitColumns: true,
striped: true,
singleSelect: false,
toolbar: '#subToolbar',
pageSize: 20,
idField: 'id',
loader: function (param, success, error) {
var getInput = self.getSubQueryData(param);
$.ajax({
showLoading: false,
url: '../api/users/',
type: 'GET',
data: JSON.stringify(getInput),
contentType: 'application/json',
headers: {
Authorization: $.cookie('EL-ADMIN-TOEKN')
},
success: function (data) {
success({ total: data.totalElements, rows:data.content });
},
error: error,
});
},
columns: [[
{ field: 'username', title: '用户名称', width: 15,},
{ field: 'nickName', title: '用户昵称 ', width: 15,},
{ field: 'gender', title: '性别', width: 10,
formatter: function (val, row, index) {
if (val == null) {
return '';
}
return val ? '<div class="ui-normal">男</div>' : '女';
}
},
{ field: 'phone', title: '电话', width: 20 },
{ field: 'email', title: '邮箱', width: 25 },
{ field: 'dept', title: '部门名称', width:15, formatter: function (val, row, index) { return row.dept.name; } },
{ field: 'enabled', title: '状态', width: 10,
formatter: function (val, row, index) {
if (val == null) {
return '';
}
return val ? '<div class="ui-normal">是</div>' : '否';
}
},
{ field: 'createTime', title: '创建日期', width: 16 }
]]
});
$.initControls();
$.hidePageLoading();
self.useControls();
},
useControls:function(){
var searchVal = $.request('search');
var hasSearch = !$.isNullOrEmpty(searchVal);
$('#dg').treegrid('getPager').pagination({
links: 2,
layout: ['prev', 'manual', 'next', 'info'],
displayMsg: '共{total}条',
});
$('#dg').treegrid('resize');
},
getQueryData: function (param) {
var data = { sort: 'id,desc' };
if(param.hasOwnProperty('id')){
data.pid = param.id;
}
return data;
},
getSubQueryData: function (param) {
var data = { size: param.rows, page: (param.page - 1), sort: 'name,desc' };
$.extend(data, $('#subForm').form('get'));
return data;
},
reload: function () {
$('#dg').datagrid('reload');
},
load: function () {
$('#subdg').datagrid('load');
},
reset: function () {
$('#mainForm').form('reset');
},
create: function () {
$.openPage('新建用户管理', 'userCreate.html', self.reload, null,1200,650);
},
update: function () {
var row = $('#subdg').datagrid('getSelected');
if (row == null) {
$.alert('警告', '未选中一行', 'warning');
return;
}
$.openPage('编辑用户管理', 'userCreate.html', function () { $('#subdg').datagrid('reload'); }, row, 1200, 800);
},
delete: function () {
var row = $('#subdg').datagrid('getChecked');
if (row == null || row.length < 1) {
$.alert('警告', '未选中一行', 'warning');
return;
}
var list = [];
$.each(row, function (i, n) {
list.push(n.id);
});
$.confirm('确认', '您确认要删除选中的记录吗？', function (r) {
if (r) {
$.ajax({
showLoading: true,
url: '../api/users',
data: JSON.stringify(list),
type: 'DELETE',
contentType:'application/json',
headers: {
Authorization: $.cookie('EL-ADMIN-TOEKN')
},
success: function (d) {
if (d.Success && d.Result) {
$.show('操作成功');
$('#subdg').datagrid('reload');
}
}
});
}
});
},
export: function () {
//导出数据表格
$('#subdg').datagrid('toExcel','岗位管理.xls');//导出
//$('#dg').datagrid('print','岗位管理.xls');//打印
},
helper: {
parseTreeData: function (data, idField, parentField, topValue) {
var arr = [];
for (var i = 0, l = data.length; i < l; i++) {
var item = data[i];
if(!item.hasOwnProperty('pid')){
item[parentField] = null;
}
if (item != null && item[parentField] === topValue) {
this.tranData(data, item, idField, parentField);
arr.push(item);
}
}
return arr;
},
tranData: function (data, parent, idField, parentField) {
var temp = [];
for (var i = 0, l = data.length; i < l; i++) {
var item = data[i];
if (item != null && item[parentField] == parent[idField]) {
this.tranData(data, item, idField, parentField);
temp.push(item);
}
}
if (temp.length > 0) {
parent["children"] = temp;
}
}
}
};
