jQueryEasyUI之DataGrid使用示例

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

成都创新互联公司是一家专注于成都网站制作、成都网站建设与策划设计,深泽网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:深泽等地区。深泽做网站价格咨询:18982081108

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

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

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

css部分：

js部分：

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


        $(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 " 查看档案 ";
                        }
                    },
                    { 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;
                }
            });
        });

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

该页面的Body部分：

很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。
后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。

namespace DAMIS.Pad2.Service { ///

/// ServiceHanlder 的摘要说明 ///

public class ServiceHanlder : IHttpHandler { public void Proce***equest(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 }; DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType()); json.WriteObject(context.Response.OutputStream, rd); } else { context.Response.Write(""); } } 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 查询档案（分页） ///

/// 查询档案（分页） ///

/// 架号 /// 页数 /// 行数 /// public void QueryData(string hfjia, string page, string rows, HttpContext context) { List list = new List(); 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 通过***号获取用户基本信息 ///

/// 通过***号获取用户基本信息 ///

/// ***号 /// 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; } } } }

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

///

/// 分页返回数据 ///

public class ReturnData { ///

/// 数据总数 ///

public int total { get; set; } ///

/// 具体数据 ///

public List rows { get; set; } }

jQueryEasyUI之DataGrid使用示例

其他资讯