easyui DatagrId 的实例讲解
下面是代码实现
@{
ViewBag.Title = "人员查找";
ViewBag.LeftWidth = "200px";
ViewBag.MiddleWidth = "200px";
}
<html>
<head>
<link href="../../../Script/easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../../Script/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../../Content/themes/base/Common/common.css" rel="stylesheet" type="text/css" />
<script src="../../../Script/easyui/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../Script/Common/json2.js" type="text/javascript"></script>
<script src="../../../Script/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../../Script/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../../../Script/Common/Toolbar.js" type="text/javascript"></script>
<script src="../../../Script/easyui/plugins/JValidator.js" type="text/javascript"></script>
<script src="../../../Script/Common/Common.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
<div region="north" data-options="border:false" style="height: 50px;" >
<div style=" margin-top:15px; margin-left:15px" >
<a id="btn_byforDepmen" onclick="searchByforDep()" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
按部门设置</a>
<a id="btn_byforRose" onclick="searchByforRose()" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
按角色设置</a>
</div>
</div>
<div region="west" title="部门树" id="leftDepTree" split="true" style="width: 230px;">
<div style="border: 1px;">
<ul id="Deptree" class="easyui-tree">
</ul>
</div>
</div>
<div region="center">
<div id="cc" class="easyui-layout" data-options="fit:true,border:false">
<div region="center" title="选择人员">
<table id="SearchEmployeeList" class="easyui-datagrid" data-options="fit:true,border:true">
</table>
</div>
</div>
</div>
<div region="east" title="选中人员" split="true" style="width: 260px;">
<table id="EmployeeList" class="easyui-datagrid" fitColumns="true" data-options="fit:true,border:false"
checkOnSelect:"true" singleselect="false">
<thead>
<tr>
<th field="ck" width="50" checkbox="true">
</th>
<th field="UserId" hidden= "true" width="50">
</th>
<th field="RealName" width="50">
姓名
</th>
</tr>
</thead>
</table>
</div>
<div region="south" split="true" style="margin-bottom: 15px; margin-right: auto;
margin-left: auto; text-align: center">
<table>
<tr>
<td>
<a id="btn_query" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确定</a>
</td>
<td>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">
清空</a>
</td>
<td>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">
取消</a>
</td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//页面加载按部门搜索部门树列表
var MySearchEmployee = {
//加载左侧部门树
onloadDepTree: function (flag) { //部门树方法
$('#Deptree').tree({
checkbox: false,
url: '../SearchEmployee/GetOrganizationList',
onClick: function (node) {
//flag代表着开关， D表示加载部门信息
if (flag == "D") {
MySearchEmployee.EmployeeListByforOrg(node.EX1, node.id); //传递参数绑定gridList
}
else {
MySearchEmployee.onloadRoleTree(node.id); //加载员工数
}
}
});
$('#cc').layout('remove', 'west');
},
//加载左侧岗位上
onloadRoleTree: function (orgid) {
$('#roleTree').tree({
checkbox: false,
url: '../SearchEmployee/GetRoseList?orgID=' + orgid,
onClick: function (node) {
MySearchEmployee.onloadSeachEmpListByforRole(node.id); //加载人员列表
}
});
},
//清空原来的数据
removeEmpListTree: function () {//岗位树
MySearchEmployee.onloadDepTree("R");
//隐藏部门加载人员列表
var region = 'west';
var options = {
region: region
};
options.width = 260;
options.split = true;
options.title = "岗位树";
options.id = "leftroleTree";
$('#cc').layout('add', options);
$("#leftroleTree").append(" <div style=\"border: 1px;\"> <ul id=\"roleTree\" class=\"easyui-tree\"> </ul> </div> ");
var data = $('#SearchEmployeeList').datagrid('getData'); //清空下searList
for (var i = (data.total - 1); i >= 0; i--) {
$('#SearchEmployeeList').datagrid('deleteRow', i);
}
$('#EmployeeList').datagrid('clearChecked');
},
//点击部门按钮
checkDepTree: function () {
//去掉岗位树
$('#cc').layout('remove', 'west');
var data = $('#SearchEmployeeList').datagrid('getData'); //清空下searList
for (var i = (data.total - 1); i >= 0; i--) {
$('#SearchEmployeeList').datagrid('deleteRow', i);
}
$('#EmployeeList').datagrid('clearChecked');
MySearchEmployee.onloadDepTree("D");
},
onloadSeachEmpList: function (UserId, RealName) {//单击选中checkbox 确定最终的显示人
var contains = false;
var data = $('#EmployeeList').datagrid('getData');
if (data.total == 0) {
$('#EmployeeList').datagrid('insertRow', {
index: 1, // index start with 0
row: { "UserId": UserId, "RealName": RealName }
});
}
else {
for (var i = 0; i < data.total; i++) {
if (data.rows[i].UserId == UserId) {
contains = true;
break;
}
}
if (!contains) {
$('#EmployeeList').datagrid('insertRow', {
index: 1, // index start with 0
row: { "UserId": UserId, "RealName": RealName }
});
}
}
$('#EmployeeList').datagrid('checkAll'); //默认全部选中
},
EmployeeListByforOrg: function (Category, OrganizationId) {//根据部门的ID和种类查询出本部门下所有的人员
var param = {
"Category": Category, "OrganizationId": OrganizationId
};
$("#SearchEmployeeList").datagrid({
url: '../SearchEmployee/GetEmployeeByForOrg',
nowrap: false, //是否换行，True 就会把数据显示在一行里
striped: true, //True 奇偶行使用不同背景色
fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
queryParams: param,
onSelect: function (rowIndex, rowData) //选中时绑定人员表
{
MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);
},
onUnselect: function (rowIndex, rowData) { //取消选中是的时候同时也要删
MySearchEmployee.UnloadEmployeeList(rowData.UserId);
},
onSelectAll: function (rows) //全部选中
{
MySearchEmployee.onSelectAllByforSearchEmployeeList(rows); //全部选中
},
onUnselectAll: function (rows) {
MySearchEmployee.onUnselectAllByforSearchEmployeeList(rows); //全部不选中
},
onLoadSuccess: function (data) {
MySearchEmployee.selectedByforSeacherEmployeeList(data);
},
columns: [[
{ field: 'ck', checkbox: 'true', width: 30 },
{ field: 'UserId', width: 30, hidden: true },
{ field: 'RealName', title: '姓名', width: 300 }
]]
});
},
//根据角色树加载List列表
onloadSeachEmpListByforRole: function (roleID) {
var param = {
"roleID": roleID
};
$("#SearchEmployeeList").datagrid({
url: '../SearchEmployee/GetUserByforRole',
nowrap: false, //是否换行，True 就会把数据显示在一行里
striped: true, //True 奇偶行使用不同背景色
fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
queryParams: param,
onSelect: function (rowIndex, rowData) //选中时绑定人员表
{
MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);
},
onUnselect: function (rowIndex, rowData) { //取消选中是的时候同时也要删
MySearchEmployee.UnloadEmployeeList(rowData.UserId);
},
onSelectAll: function (rows) //全部选中
{
MySearchEmployee.onSelectAllByforSearchEmployeeList(rows); //全部选中
},
onUnselectAll: function (rows) {
MySearchEmployee.onUnselectAllByforSearchEmployeeList(rows); //全部不选中
},
onLoadSuccess: function (data) {
MySearchEmployee.selectedByforSeacherEmployeeList(data);
},
columns: [[
{ field: 'ck', checkbox: 'true', width: 30 },
{ field: 'UserId', width: 30, hidden: true },
{ field: 'RealName', title: '姓名', width: 300 }
]]
});
},
UnloadEmployeeList: function (UserId) { //取消的时候删除行
//根据userID查找这一行的索引
var data = $('#EmployeeList').datagrid('getData');
for (var i = 0; i < data.total; i++) {
if (data.rows[i].UserId == UserId) {
$('#EmployeeList').datagrid('deleteRow', i);
}
}
},
unselectRowEmployeeList: function (UserId) { //去除已经选择上的人员，并且在SearchEmployeeList把打钩去掉
var data = $('#SearchEmployeeList').datagrid('getData');
for (var i = 0; i < data.total; i++) {
if (data.rows[i].UserId == UserId) {
$('#SearchEmployeeList').datagrid('unselectRow', i);
}
}
},
onSelectAllByforSearchEmployeeList: function (rows) { //SearchEmployeeList 全选
//那么EmployeeList 就要显示选中的行
//选清空一下
// $('#EmployeeList').datagrid('clearChecked');
//然后在增加
for (var i = 0; i < rows.length; i++) {
MySearchEmployee.onloadSeachEmpList(rows[i].UserId, rows[i].RealName);
}
},
onUnselectAllByforSearchEmployeeList: function (rows) { //SearchEmployeeList 全不选
var data = $('#EmployeeList').datagrid('getData'); //获取当前的EmloyeeList所有的数据
//删除EmployeeList
for (var i = 0; i < rows.length; i++) {
for (var k = 0; k < data.total; k++) {
if (rows[i].UserId == data.rows[k].UserId) {
$('#EmployeeList').datagrid('deleteRow', k);
}
}
}
},
onloadForEmployeeList: function () {
$("#EmployeeList").datagrid({
onUnselect: function (rowIndex, rowData) {
$('#EmployeeList').datagrid('deleteRow', rowIndex); //删除当前行
MySearchEmployee.unselectRowEmployeeList(rowData.UserId); //去除SearchEmployeeList打钩数据
},
onLoadSuccess: function (data) { //接收data
//全局变量
},
onUnselectAll: function (rows) {
MySearchEmployee.deleteAllforEmployeeList(rows); //删除所有的列表人员
}
});
},
deleteAllforEmployeeList: function (rows) { //清空选中的列表
var data = $('#SearchEmployeeList').datagrid('getData'); //获取当前的EmloyeeList所有的数据
var arryList = [];
for (var i = (rows.length - 1); i >= 0; i--) {
for (var k = 0; k < data.total; k++) {
if (data.rows[k].UserId == rows[i].UserId) {
arryList.push(k);
}
}
$('#EmployeeList').datagrid('deleteRow', i); //删除list列表
}
for (var i = 0; i < arryList.length; i++) {
$('#SearchEmployeeList').datagrid('unselectRow', arryList[i]);
}
},
selectedByforSeacherEmployeeList: function (Depdata) { //执行回调打钩
var Empdata = $('#EmployeeList').datagrid('getData');
var arryList = []; //存放索引的值
for (var i = 0; i < Depdata.total; i++) {
for (var k = 0; k < Empdata.total; k++) {
if (Depdata.rows[i].UserId == Empdata.rows[k].UserId) {
arryList.push(i);
}
}
}
for (var i = 0; i < arryList.length; i++) {
$('#SearchEmployeeList').datagrid('checkRow', arryList[i]); // checkRow selectRow
}
},
retureEmpListData: function () { //返回提交EmpList表中的数据
var Empdata = $('#EmployeeList').datagrid('getData');
return Empdata.rows;
}
};
//单击部门
function searchByforDep() { //按部门搜索
MySearchEmployee.checkDepTree();
}
//单击按角色查询
function searchByforRose() {
MySearchEmployee.removeEmpListTree(); //加载角色权限树
}
$("#btn_query").click(function () { //点击确定回传数据
// MySearchEmployee.retureEmpListData();
});
//页面初始化
$(function () {
MySearchEmployee.onloadDepTree("D");
MySearchEmployee.onloadForEmployeeList(); //页面出
});
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections;
using System.Web.Mvc;
using System.Web;
using System.Data;
using GWork.Models;
using Newtonsoft.Json;
using GWork.DataAccess;
using GWork.Business;
using GWork.IBusiness;
using SysManager.Models;
using SysManager.Common.Utilities;
using Newtonsoft.Json.Converters;
namespace GWork.Controllers.OpenWindows.SearchEmployee
{
public class SearchEmployeeController : Controller
{
private SYS_User userinfo = new SYS_User();
private SYS_Organization organizationinfo = new SYS_Organization(); //权限表中的组织部门
private SysManager.IBusiness.IOrganizationBLL organizationibll = SysManager.Business.BusinessFactory.Instance.CreateOrganization();//部门工厂
private SysManager.IBusiness.IRolesBLL rolesbll = SysManager.Business.BusinessFactory.Instance.CreateRoles();//角色工厂
private SysManager.IBusiness.IUserBLL userbll = SysManager.Business.BusinessFactory.Instance.CreateUser();// 获取员工用户方法
public ActionResult SearchEmployeeList()
{
return View();
}
#region 获取部门列表树集合
/// <summary>
/// 获取部门列表树集合
/// </summary>
/// <returns></returns>
public string GetOrganizationList()
{
System.Collections.IList orgainList = organizationibll.GetList();//获取部门方法
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_Organization> listtree = SysManager.Common.Utilities.IListHelper.IListToList<SYS_Organization>(orgainList);//将IList 转化成List
SYS_Organization orgobj = listtree.Find(org => org.ParentId == "0");//构造顶级节点//（数据库中用的是O）
LEFTTREE lefttree = new LEFTTREE();
lefttree.ID = orgobj.OrganizationId; //树节点
lefttree.TEXT = orgobj.FullName; //公司名称
lefttree.CHILDREN = new List<LEFTTREE>(); //树子节点
lefttree.EX1 = orgobj.Category;// （额外条件种类）
TreeDiGui(lefttree.ID, lefttree, listtree); //递归用法
return "[" + JsonConvert.SerializeObject(lefttree).Replace("TEXT", "text").Replace("ID", "id").Replace("CHILDREN", "children") + "]";
}
#region 查找树的子节点
/// <summary>
/// 查找树的子节点
/// </summary>
/// <param name="sb"></param>
/// <param name="ParentId"></param>
/// <returns></returns>
public LEFTTREE TreeDiGui(string ParentId, LEFTTREE LEFTTREE, IEnumerable<SYS_Organization> ALLTREE)
{
//
IEnumerable<SYS_Organization> FindTree = ALLTREE.Where(new Func<SYS_Organization, bool>(d => d.ParentId == ParentId));
foreach (SYS_Organization item in FindTree)
{
LEFTTREE ChildTree = new LEFTTREE();
ChildTree.ID = item.OrganizationId;
ChildTree.TEXT = item.FullName;
ChildTree.CHILDREN = new List<LEFTTREE>();
ChildTree.EX1 = item.Category;//种类
LEFTTREE.CHILDREN.Add(ChildTree);
TreeDiGui(ChildTree.ID, ChildTree, ALLTREE);
}
return LEFTTREE;
}
#endregion
#region 根据部门查找该部门下所有的人
/// <summary>
/// 根据组织部门下的人员
/// </summary>
/// <returns></returns>
public string GetEmployeeByForOrg()
{
try
{
string Category = Request["Category"].ToString(); //获取种类
string OrganizationId = Request["OrganizationId"].ToString();//获取部门ID
System.Collections.IList userIList = userbll.GetDataTableByOrganizationId(Category, OrganizationId);//根据种类和orgid查询出该部门下所有的人员
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_User> userList = SysManager.Common.Utilities.IListHelper.IListToList<SYS_User>(userIList);//把得到IList转化成List格式
return JsonConvert.SerializeObject(userList, timeConverter);
}
catch (Exception ex)
{
throw (ex);
}
}
#endregion
#endregion
#region 获取岗位列表树集合
/// <summary>
/// 获取角色列表集合
/// </summary>
/// <returns></returns>
public string GetRoseList() //string
{
string orgID = Request["orgID"].ToString();//获取orgID
System.Collections.IList roseList = rolesbll.GetList(orgID);
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_Roles> listtree = SysManager.Common.Utilities.IListHelper.IListToList<SYS_Roles>(roseList);//将IList 转化成List
List<LEFTTREE> List = new List<LEFTTREE>();
foreach (SYS_Roles item in listtree)
{
LEFTTREE lefttree = new LEFTTREE();
lefttree.ID = item.RoleId; //树节点
lefttree.TEXT = item.FullName; //公司名称
lefttree.CHILDREN = new List<LEFTTREE>(); //树子节点
List.Add(lefttree);
}
return JsonConvert.SerializeObject(List, timeConverter).Replace("TEXT", "text").Replace("ID", "id").Replace("CHILDREN", "children") ;
}
#endregion
#region 根据岗位角色条件查询人
/// <summary>
///根据角色条件查询
/// </summary>
/// <returns></returns>
public string GetUserByforRole()
{
try
{
string roleID = Request["roleID"].ToString();
string strWhere = " and roleid=" + "'" + roleID + "'";
System.Collections.IList userList = userbll.GetUserListBywhere(strWhere);
IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
List<SYS_User> list = SysManager.Common.Utilities.IListHelper.IListToList<SYS_User>(userList);//把得到IList转化成List格式
return JsonConvert.SerializeObject(userList, timeConverter);
}
catch (Exception ex)
{
throw (ex);
}
}
#endregion
}
}
| -- |
easyui DatagrId 的实例讲解的更多相关文章
- Jquery EasyUI DataGrid .net实例
前台界面:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- JSON.stringify 语法实例讲解+easyui data-options属性+expires【申明：来源于网络】
JSON.stringify 语法实例讲解+easyui data-options属性+expires[申明:来源于网络] JSON.stringify 语法实例讲解:http://www.jb51. ...
- EasyUI datagrid优化
easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- springMVC注解方式+easyUI+MYSQL配置实例
刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+e ...
- 谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
随机推荐
- SQLAlchemy-Utils
由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法. 安装: pip3 install sqlalchemy_utils 示例: f ...
- linux-vmstat-显示虚拟内存状态
推荐:更多linux 性能监测与优化 关注:linux命令大全 vmstat命令的含义为显示虚拟内存状态(“Viryual Memor Statics”),但是它可以报告关于进程.内存.I/O等系统整 ...
- 2.Linux文件IO编程
2.1Linux文件IO概述 2.1.0POSIX规范 POSIX:(Portable Operating System Interface)可移植操作系统接口规范. 由IEEE制定,是为了提高UNI ...
- 二、第一个ECharts图表
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...
- 【codeforces 707E】Garlands
[题目链接]:http://codeforces.com/contest/707/problem/E [题意] 给你一个n*m的方阵; 里面有k个联通块; 这k个联通块,每个连通块里面都是灯; 给你q ...
- PatentTips - Hamming distance comparison
BACKGROUND INFORMATION In a typical data processing environment, data may be transmitted in multiple ...
- 为 Windows Phone 8.1 app 解决“The type does not support direct content.”的问题
我在 VS 14 CTP 中新建了一个空的 app store 项目名叫 PlayWithXaml ,项目的 MainPage.xaml 文件改为了以下内容: <Page x:Class=&qu ...
- S - Arc of Dream 矩阵快速幂
An Arc of Dream is a curve defined by following function: where a 0 = A0 a i = a i-1*AX+AY b 0 = B0 ...
- 关于static静态块的使用和static list的使用
public class CorsConfiguration { /** * Wildcard representing <em>all</em> origins, metho ...
- 2 instances of postgresql but I really need one [closed]
I happen to have 2 installed instances of postgresql at my machine: 9.1 and 9.2: sudo service postgr ...