easyui DatagrId 的实例讲解

时间：2014-02-28 09:20:12 阅读：797 评论：0 收藏：0 [点我收藏+]

bubuko.com,布布扣

下面是代码实现

@{
    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>

<table>

        </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);
},

                    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 全不选

            $("#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 的实例讲解,布布扣,bubuko.com

easyui DatagrId 的实例讲解

原文：http://www.cnblogs.com/dullbaby/p/3571645.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)