<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>选择部门</title>
|
<!--[if !IE]><!-->
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<!--<![endif]-->
|
<!--[if gt IE 8]>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<![endif]-->
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css"
|
rel="stylesheet" type="text/css">
|
<link rel="stylesheet" href="static/styles/initialize.css"
|
type="text/css">
|
<link rel="stylesheet" href="static/styles/common.css"
|
type="text/css">
|
|
<script type="text/javascript" src="static/plugins/jquery/jquery.min.js"></script>
|
<script type="text/javascript"
|
src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript"
|
src="static/plugins/jquery-easyui/plugins/datagrid-scrollview.js"></script>
|
<script type="text/javascript"
|
src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript"
|
src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
|
<style>
|
html, body {
|
height: 100%;
|
}
|
|
.container {
|
width: 100%;
|
height: 100%;
|
padding: 10px;
|
}
|
|
.left {
|
width: 50%;
|
float: left;
|
}
|
|
.right {
|
width: 50%;
|
float: right;
|
}
|
|
.search {
|
clear: both;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div class="container">
|
<div class="left">
|
<div class="easyui-panel pt-tree" style="border-right: none;">
|
<ul id="ul_dept"></ul>
|
</div>
|
</div>
|
<div class="right">
|
<table id="dg_hasSelect"></table>
|
</div>
|
<div id="tb">
|
<a href="javascript:void(0);" onclick="delAll();"
|
class="pt-btn pt-btn-danger"><i class="fa fa-trash-o"></i>全部删除</a>
|
</div>
|
<div class="search">
|
<div class="easyui-panel"
|
style="padding:20px 300px; border-top:none;">
|
<input class="easyui-searchbox"
|
data-options="prompt:'请输入部门名称',searcher:doSearch"
|
style="width:100%">
|
|
</div>
|
</div>
|
|
<div class="pt-form-btn" style="bottom:0px;">
|
<div class="form-group">
|
<button type="button" class="pt-btn pt-btn-info" onclick="doSave();">确定</button>
|
<button type="reset" class="pt-btn pt-btn-default"
|
onclick="doClose();">关闭
|
</button>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script>
|
//窗口参数，用于弹窗传递
|
var params = {
|
opts: null,
|
callBack: null
|
};
|
var deptId = "${deptId}";
|
var multiSelect = "${multiSelect}" == "true";
|
var returnIdType = "${returnIdType}" == "true";
|
//部门树URL
|
var url = "management/dept/listDeptByTree";
|
var data = [];
|
var dg;
|
if (deptId) {
|
url += "?deptId=" + deptId;
|
}
|
var deptTree = $("#ul_dept").tree({
|
method: "post",
|
url: url,
|
animate: true,
|
checkbox: true,
|
cascadeCheck: false, //单选时必须关掉级联
|
onBeforeLoad: function (node, param) {
|
new ResizeScroll({
|
"id": "#ul_dept",
|
"height": "378"
|
});
|
|
wcp.ui.setBusy("#ul_dept");
|
},
|
onLoadError: function (args) {
|
wcp.ui.clearBusy("#ul_dept");
|
},
|
onLoadSuccess: function (node, data) {
|
wcp.ui.clearBusy("#ul_dept");
|
|
new ResizeScroll({
|
"id": "#ul_dept",
|
"height": "378"
|
});
|
|
//初始化树时，判断是否已经有备选的，如果有，则勾上
|
var hasRows = dg.datagrid("getRows");
|
if (hasRows != null) {
|
for (var i = 0; i < data.length; i++) {
|
for (var j = 0; j < hasRows.length; j++) {
|
if (data[i].id == hasRows[j].id) {
|
node = deptTree.tree('find', data[i].id)
|
deptTree.tree('check', node.target);
|
break;
|
}
|
}
|
}
|
}
|
|
},
|
onCheck: function (node, checked) {
|
//单选
|
if (checked & multiSelect == false) {
|
var allCheckedNodes = $('#ul_dept').tree("getChecked");
|
for (var i = 0; i < allCheckedNodes.length; i++) {
|
var tempNode = allCheckedNodes[i];
|
if (tempNode.id != node.id) {
|
$('#ul_dept').tree('uncheck', tempNode.target);
|
}
|
}
|
}
|
if (checked) {
|
var state = false;
|
var hasRows = dg.datagrid("getRows");
|
if (hasRows != null) {
|
for (var i = 0; i < hasRows.length; i++) {
|
if (node.id == hasRows[i].id) {
|
state = true;
|
break;
|
}
|
}
|
if (state != true) {
|
dg.datagrid("appendRow", {
|
"name": node.text,
|
"id": node.id
|
});
|
}
|
|
}
|
|
} else {
|
var hasRows = dg.datagrid("getRows");
|
if (hasRows != null) {
|
for (var i = 0; i < hasRows.length; i++) {
|
if (node.id == hasRows[i].id) {
|
dg.datagrid("deleteRow", i);
|
}
|
}
|
}
|
}
|
}
|
});
|
$(function () {
|
dg = $('#dg_hasSelect').datagrid({
|
data: data,
|
fitColumns: true,
|
nowrap: true,
|
rownumbers: true,
|
height: 380,
|
idField: "id",
|
emptyMsg: "没有找到匹配的记录",
|
toolbar: "#tb",
|
// frozenColumns:[[{field:'ck',checkbox:true}]],
|
columns: [[
|
|
{
|
field: 'name',
|
title: '部门名称',
|
width: 200
|
},
|
{
|
field: 'id',
|
title: '操作',
|
width: 100,
|
formatter: function (value, row, index) {
|
|
return '<a href="javascript:void(0);" onclick="delTableRow(this,\'' + value + '\');" class="pt-color-danger"><i class="fa fa-trash-o" title="删除"></i></a>';
|
}
|
}
|
|
]],
|
|
onLoadSuccess: function () {
|
new ResizeScroll({
|
"id": ".datagrid-body",
|
"height": "311",
|
"index": 1
|
});
|
|
}
|
});
|
});
|
|
function delTableRow(target, value) {
|
var tr = $(target).closest('tr.datagrid-row');
|
var index = parseInt(tr.attr('datagrid-row-index'));
|
dg.datagrid('deleteRow', index);
|
var node = deptTree.tree('find', value)
|
deptTree.tree('uncheck', node.target);
|
}
|
|
//查询数据
|
function doSearch(value) {
|
if (value != null && value != "") {
|
var urlForSearch = "management/dept/listDeptByTreeForSearch";
|
$("#ul_dept").tree({
|
url: urlForSearch,
|
queryParams: {
|
searchText: value
|
}
|
});
|
} else {
|
$("#ul_dept").tree({
|
url: url,
|
queryParams: {
|
searchText: value
|
}
|
});
|
}
|
}
|
|
|
//确定按钮事件
|
function doSave() {
|
var hasRows = $('#dg_hasSelect').datagrid("getRows");
|
|
//分隔符
|
var separator = params.opts.separator ? params.opts.separator : ";";
|
|
var ids = "";
|
var names = "";
|
|
for (var i = 0; i < hasRows.length; i++) {
|
if (returnIdType) {
|
ids += "1|" + hasRows[i].id + separator;
|
} else {
|
ids += hasRows[i].id + separator;
|
}
|
names += hasRows[i].name + separator;
|
}
|
ids = ids.slice(0, -1);
|
names = names.slice(0, -1);
|
if (params.opts.layerOpener) {
|
if (params.opts.idElement) {
|
var elementClass = params.opts.layerOpener.$('#' + params.opts.idElement).attr('class');
|
if (elementClass != null && elementClass.indexOf("easyui-textbox") > -1) {
|
params.opts.layerOpener.$("#" + params.opts.idElement).textbox("setValue", ids);
|
} else {
|
params.opts.layerOpener.$("#" + params.opts.idElement).val(ids);
|
}
|
}
|
if (params.opts.nameElement) {
|
var elementClass = params.opts.layerOpener.$('#' + params.opts.nameElement).attr('class');
|
if (elementClass != null && elementClass.indexOf("easyui-textbox") > -1) {
|
params.opts.layerOpener.$("#" + params.opts.nameElement).textbox("setValue", names);
|
} else {
|
params.opts.layerOpener.$("#" + params.opts.nameElement).val(names);
|
}
|
}
|
}
|
|
|
//回调函数
|
if (params.callBack) {
|
params.callBack(hasRows);
|
}
|
|
var index = top.layer.getFrameIndex(window.name); //获取窗口索引
|
top.layer.close(index);
|
}
|
|
function doClose() { //关闭按钮事件
|
var index = top.layer.getFrameIndex(window.name); //获取窗口索引
|
top.layer.close(index);
|
}
|
|
function delAll() {
|
var hasRows = dg.datagrid("getRows");
|
if (hasRows != null) {
|
var length = hasRows.length;
|
var arr = [];
|
for (var i = 0; i < length; i++) {
|
arr.push(hasRows[i]["id"]);
|
}
|
for (var i = 0; i < length; i++) {
|
var node = deptTree.tree('find', arr[i]);
|
deptTree.tree('check', node.target);
|
if (node) {
|
deptTree.tree('uncheck', node.target); //uncheck时，自动删除右边datagrid的数据
|
}
|
|
}
|
}
|
dg.datagrid("load");
|
}
|
</script>
|
</html>
|
