<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>组织架构管理</title>
<script src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.4.4/easyloader.js"></script>
<script src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<link href="jquery-easyui-1.4.4/themes/color.css" rel="stylesheet" />
<link href="jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
<link href="jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="jquery-easyui-1.4.4/IconExtension.css" rel="stylesheet" />
<script src="js/common.js"></script>
<script src="jquery-easyui-1.4.4/jquery-easyui-etree/jquery.etree.js"></script>
<script src="jquery-easyui-1.4.4/jquery-easyui-etree/jquery.etree.lang.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:‘west‘,split:true,collapsible:false" title="组织架构" style="width:250px;">
<ul id="Tree" style="padding: 5px 10px;"></ul>
<div style="text-align:center;position:absolute;bottom:10px;left:50px">
<a href="javascript://" onclick="AddRootNode()" style="font-size:small">增加根节点</a>
</div>
</div>
<div id="center" data-options="region:‘center‘">
<table id="DataGrid" data-options="region:‘center‘,title:‘员工列表‘"></table>
<div id="GridToolBar" border="false" style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;">
<div style="float: left;">
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-add" onclick=" OpendlgEdit(‘‘, ‘‘)">添加</a>
</div>
<div class="datagrid-btn-separator"></div>
<div style="float: left;">
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-edit" onclick=" OpendlgEdit(‘ModifyEmployee‘, $(‘#DataGrid‘).datagrid(‘getSelected‘).id)">修改</a>
</div>
<div class="datagrid-btn-separator"></div>
<div style="float: left;">
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove" onclick=" DeleteRow()">删除</a>
</div>
<div class="datagrid-btn-separator"></div>
<div style="float: left;">
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-application_view_icons" onclick=" GetAllList()">显示所有</a>
</div>
<div class="datagrid-btn-separator"></div>
<div style="float: left;padding:2px">
<input class="easyui-searchbox" data-options="prompt:‘请输入姓名‘,searcher:SearchByRealName" style="width: 150px"></input>
</div>
</div>
<script>
$(‘#DataGrid‘).datagrid({
title: ‘员工列表‘,
//iconCls: ‘icon-edit‘,//图标
width: 700,
height: ‘auto‘,
nowrap: false,
striped: true,
border: true,
collapsible: false,//是否可折叠的
fit: true,//自动大小
url: ‘personnel/OrgManage.ashx?action=GetEmployeeList‘,
//sortName: ‘id‘,
//sortOrder: ‘desc‘,
remoteSort: false,
idField: ‘fldId‘,
checkOnSelect: false,
selectOnCheck: false,
singleSelect: true,//是否单选
pagination: true,//分页控件
rownumbers: true,//行号
frozenColumns: [[
{ field: ‘ck‘, checkbox: true }
]],
toolbar: ‘#DataGridEmployeeToolBar‘,
columns: [[
{ field: ‘id‘, title: ‘ID‘, width: 30 },
{ field: ‘code‘, title: ‘工号‘, width: 60 },
{ field: ‘realname‘, title: ‘姓名‘, width: 80 },
{ field: ‘departname‘, title: ‘部门‘, width: 80 },
{ field: ‘positionname‘, title: ‘职位‘, width: 80 },
{
field: ‘sex‘, title: ‘性别‘, width: 40, formatter: function (value, rowData, rowIndex) {
if (value == ‘0‘) {
return ‘男‘;
}
else {
return ‘女‘;
}
}
},
{ field: ‘birthday‘, title: ‘生日‘, width: 80 },
{ field: ‘mobile‘, title: ‘手机‘, width: 80 },
{ field: ‘email‘, title: ‘邮箱‘, width: 150 },
{ field: ‘idcard‘, title: ‘身份证‘, width: 150 },
{
field: ‘updatetime‘, title: ‘更新时间‘, width: 200
}
]],
onLoadSuccess: function () {
}
}).datagrid(‘getPager‘).pagination({
//设置分页控件
pageSize: 50,//每页显示的记录条数，默认为10
pageList: [50, 100, 150],//可以设置每页记录条数的列表
beforePageText: ‘第‘,//页数文本框前显示的汉字
afterPageText: ‘页 共 {pages} 页‘,
displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘,
});
function GetAllList() {
$(‘#DataGrid‘).datagrid(‘options‘).queryParams.realname = realname;
$(‘#DataGrid‘).datagrid(‘reload‘);
}
</script>
</div>
<!---员工编辑对话框--->
<div id="dlgEdit" class="easyui-dialog" style="padding:10px" closed="true">
</div>
<div id="TreeMenu" class="easyui-menu" style="width:15px;">
<div onclick="javascript: $(‘#Tree‘).etree(‘create‘)">增加子部门</div>
<div onclick="javascript: $(‘#Tree‘).etree(‘edit‘)">重命名</div>
<div onclick="javascript: $(‘#Tree‘).etree(‘destroy‘)">删除部门</div>
</div>
<script>
var treeid = "";
$(‘#Tree‘).etree({
url: ‘personnel/OrgManage.ashx?action=GetDepartTree‘,
createUrl: ‘personnel/OrgManage.ashx?action=AddDepart‘,
updateUrl: ‘personnel/OrgManage.ashx?action=RenameDepart‘,
destroyUrl: ‘personnel/OrgManage.ashx?action=DeleteDepart‘,
checkbox: false,
lines: true,
onLoadSuccess: function () {
$("#Tree .tree-file ").each(function (node, data) {
$(this).replaceWith(‘<span class="tree-icon tree-indent icon-group"></span>‘);
});
$("#Tree .tree-folder-open ").each(function (node, data) {
$(this).replaceWith(‘<span class="tree-icon tree-folder icon-group"></span>‘);
});
//禁止拖拽 功能
$(this).tree(‘disableDnd‘);
},
onContextMenu: function (e, node) {
e.preventDefault();
$(this).tree(‘select‘, node.target);
$(‘#TreeMenu‘).menu(‘show‘, {
left: e.pageX,
top: e.pageY,
noline: true
});
},
onClick: function (node) {
treeid = node.id;
$(‘#DataGrid‘).datagrid(‘options‘).queryParams.realname = treeid;
$(‘#DataGrid‘).datagrid(‘reload‘);
}
});
//增加根节点
function AddRootNode() {
$.get(‘personnel/OrgManage.ashx?action=AddDepart&parentid=0‘, function (data) {
if (data = ‘1‘)
$(‘#Tree‘).tree(‘reload‘);
});
}
//删除员工
function DeleteRow() {
var rows = $(‘#DataGrid‘).datagrid(‘getChecked‘);
if (rows.length > 0) {
$.messager.confirm(‘Confirm‘, ‘确定要删除勾选的记录吗?‘, function (r) {
if (r) {
var idList = ‘‘;
for (i in rows) {
idList += rows[i].id + ‘,‘;
}
idList = idList.substr(0, idList.length - 1);
$.post(‘???????????????????????‘, { action: ‘DeleteEmployee‘, id: idList }, function (result) {
if (result > 0) {
$(‘#DataGrid‘).datagrid(‘reload‘).datagrid(‘unselectAll‘); // 重新加载数据
} else {
$.messager.show({ // 出错提示
title: ‘Error‘,
msg: result.errorMsg
});
}
}, ‘json‘);
}
});
}
}
//打开编辑 对话框
function OpendlgEditEmployee(action, id) {
window.open(‘EditEmployee.html?action=‘ + action + ‘&id=‘ + id, "newwindow", " toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=200,left=300,height=350,width=500");
}
function SearchByRealName(realname) {
$(‘#DataGrid‘).datagrid(‘options‘).queryParams.keyword = realname;
$(‘#DataGrid‘).datagrid(‘reload‘);
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/shenzhenhua/p/5648255.html