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"  οnclick="searchByforDep()" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
                        按部门设置</a>
           
                    <a id="btn_byforRose" οnclick="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

 

 

 

 

 

 


    }
}

--

 

 

posted on 2014-02-27 15:33  笨小孩做开发 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/dullbaby/p/3571645.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值