jQuery EasyUI之DataGrid使用示例

浏览数：49 / 时间：2015年06月09日

jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。

jQuery EasyUI框架的官方主页：http://www.jeasyui.com/demo/main/index.php。可以下载完整开发包，里面有示例代码可以参考。

由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。

在页面中首先要引用相关的css以及js文件，这样才能使用该组件。

css部分：

 <link href="../Js/jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" />
 <link href="../Js/jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="../Css/datagrid.css" />

js部分：

<script src="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Js/jQueryEasyUI/jquery.pagination.js" type="text/javascript"></script>

由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件，后面会看到分页的效果。

<script type="text/javascript">
        $(function () {
            var qParams = { mode: ‘Query‘, hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查询参数
            var oldRowIndex;
            var opt = $("#grid");
            opt.datagrid({
                width: ‘780‘,
                height: ‘440‘,
                nowrap: false,
                striped: true,
                fitColumns: true,
                singleSelect: true,
                queryParams: qParams,  //参数
                url: ‘../Service/ServiceHanlder.ashx‘,
                //idField: ‘id‘,  //主索引
                //frozenColumns: [[{ field: ‘ck‘, checkbox: true}]], 
                pageSize: 20,
                pageList: [20, 25, 30],
                pagination: true, //是否启用分页
                rownumbers: true, //是否显示列数

                onClickRow: function (rowIndex) {
                    if (oldRowIndex == rowIndex) {
                        opt.datagrid(‘clearSelections‘, oldRowIndex);
                    }
                    var selectRow = opt.datagrid(‘getSelected‘);
                    oldRowIndex = opt.datagrid(‘getRowIndex‘, selectRow);
                },
                columns: [[
                    {
                        title: "浏览档案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) {
                            return "<font onclick=searchDA(‘" + rowData.PersonIdNum + "‘); color=‘blue‘ > 查看档案 </font>";
                        }
                    },
                    { field: ‘DAGInPosition‘, title: "档案位置", width: 40, align: "center" },
                    { field: ‘PersonIdNum‘, title: "身份证号", width: 80, align: "center" },
                    { field: ‘PersonName‘, title: "姓名", width: 40, align: "center" },
                    { field: ‘PersonSex‘, title: "性别", width: 30, align: "center" },
                    { field: ‘DAId‘, title: "档案编号", width: 60, align: "center" }
                //                    { field: ‘DAGInOrg‘, title: "业务经办机构", width: 60, align: "center" }
                ]]
            }).datagrid("getPager").pagination({
                beforePageText: ‘第‘, //页数文本框前显示的汉字  
                afterPageText: ‘页/{pages}页‘,
                displayMsg: ‘共{total}条记录‘,
                onBeforeRefresh: function () {
                    return true;
                }
            });
        });
</script>

请注意这段长长的js代码，这是该页面的核心代码。里面的参数设置请注意，主要就是通过js动态的构造datagird。

该页面的Body部分：

<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="hfjia" runat="server" />
    <div>
        <div class="form-wrapper cf" style="margin-top: 10px;">
            <div align="center" style="width: 780px;">
                <input id="sfz" runat="server" type="text" placeholder="请扫描档案袋上面的条形码..." />
                <button id="ssss">
                    档案查询</button>
            </div>
        </div>
        <div style="float: left; width: 780px; margin-top: -40px; margin-left: 10px;">
            <table id="grid">
            </table>
        </div>
        <div style="float: left; margin-top: 10px; margin-left: 10px;">
            <input type="button" value="返回主菜单" id="button1s" onclick="javascript: window.location.href = ‘../Main.aspx‘" />
        </div>
    </div>
    </form>
</body>

其中id为grid的table部分，与上面的js部分中grid对应。

该页面的后台代码部分：

protected void Page_Load(object sender, EventArgs e)
{
    string dagid = Request.QueryString["dagid"];
    hfjia.Value = dagid;
}

很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。

后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。

namespace DAMIS.Pad2.Service
{
    /// <summary>
    /// ServiceHanlder 的摘要说明
    /// </summary>
    public class ServiceHanlder : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            if (!string.IsNullOrEmpty(context.Request["mode"]))
            {
                if (context.Request["mode"].Equals("Query"))
                {
                    if (!string.IsNullOrEmpty(context.Request["sfz"]))
                    {
                        string sfz = context.Request["sfz"];
                        UserInfo userInfo = GetUserInfoById(sfz);

                        if (userInfo != null)
                        {
                            ReturnData rd = new ReturnData();
                            rd.total = 1;
                            rd.rows = new List<UserInfo>() { userInfo };

                            DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
                            json.WriteObject(context.Response.OutputStream, rd);
                        }
                        else
                        {
                            context.Response.Write("<script>alert(‘查无此人‘);</script>");
                        }
                    }
                    else
                    {
                        string hfjia = Regex.Match(context.Request["hfjia"].Split(‘;‘)[0], @"\d+").Value;
                        string page = context.Request["page"];
                        string rows = context.Request["rows"];

                        QueryData(hfjia, page, rows, context);
                    }
                }

                if (context.Request["mode"].Equals("QueryInner"))
                {
                    string dajid = context.Request["dajid"].Trim(‘\‘‘);
                    string dagid = context.Request["dagid"];

                    string hfjia = string.Join("-", dajid, dagid);
                    string page = context.Request["page"];
                    string rows = context.Request["rows"];

                    QueryData(hfjia, page, rows, context);
                }
            }
        }

        #region 查询档案（分页）
        /// <summary>
        /// 查询档案（分页）
        /// </summary>
        /// <param name="hfjia">架号</param>
        /// <param name="page">页数</param>
        /// <param name="rows">行数</param>
        /// <param name="context"></param>
        public void QueryData(string hfjia, string page, string rows, HttpContext context)
        {
            List<UserInfo> list = new List<UserInfo>();
            string msg = string.Empty;
            DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);

            foreach (DataRow dr in dt.Rows)
            {
                list.Add(new UserInfo()
                {
                    PersonIdNum = dr["PersonIdNum"].ToString(),
                    PersonName = dr["PersonName"].ToString(),
                    PersonSex = dr["PersonSex"].ToString(),
                    DAId = dr["DAId"].ToString(),
                    DABusKindName = dr["DABusKindName"].ToString(),
                    DAKindName = dr["DAKindName"].ToString(),
                    DALevelCodeName = dr["DALevelCodeName"].ToString(),
                    DAGInPosition = dr["DAGInPosition"].ToString(),
                    DAGInUserId = dr["DAGInUserId"].ToString(),
                    DAGInOrg = dr["DAGInOrg"].ToString(),
                    IsValid = dr["IsValid"].ToString(),
                });
            }

            list = list.OrderBy(x => x.DAGInPosition).ToList();

            ReturnData rd = new ReturnData();
            rd.total = dt.Rows.Count;
            rd.rows = list.Where(x => x.IsValid == "0").Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows)).ToList();
            DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
            json.WriteObject(context.Response.OutputStream, rd);
        }
        #endregion

        #region 通过身份证号获取用户基本信息
        /// <summary>
        /// 通过身份证号获取用户基本信息
        /// </summary>
        /// <param name="id">身份证号</param>
        /// <returns></returns>
        public static UserInfo GetUserInfoById(string id)
        {
            string hfjia = CommonBLL.GetUserPositionById(id);
            string msg = string.Empty;
            if (!string.IsNullOrEmpty(hfjia))
            {
                hfjia = hfjia.Split(‘-‘)[0] + "-" + hfjia.Split(‘-‘)[1];
                DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);
                if (dt != null && dt.Rows.Count > 0)
                {
                    DataRow dr = dt.Select("personidnum = ‘" + id + "‘").FirstOrDefault();

                    UserInfo userInfo = new UserInfo()
                    {
                        PersonIdNum = dr["PersonIdNum"].ToString(),
                        PersonName = dr["PersonName"].ToString(),
                        PersonSex = dr["PersonSex"].ToString(),
                        DAId = dr["DAId"].ToString(),
                        DABusKindName = dr["DABusKindName"].ToString(),
                        DAKindName = dr["DAKindName"].ToString(),
                        DALevelCodeName = dr["DALevelCodeName"].ToString(),
                        DAGInPosition = dr["DAGInPosition"].ToString(),
                        DAGInUserId = dr["DAGInUserId"].ToString(),
                        DAGInOrg = dr["DAGInOrg"].ToString(),
                        IsValid = dr["IsValid"].ToString(),
                    };
                    return userInfo;
                }
            }
            return null;
        }
        #endregion

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

这里面也没什么好说的，就是为前端页面提供数据。代码完全可以进一步精简、处理，这里就不修正了。

里面用到的一个实体类：

    /// <summary>
    /// 分页返回数据
    /// </summary>
    public class ReturnData
    {
        /// <summary>
        /// 数据总数
        /// </summary>
        public int total { get; set; }

        /// <summary>
        /// 具体数据
        /// </summary>
        public List<UserInfo> rows { get; set; }
    }