为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery EasyUI之DataGrid使用示例

标签:
JQuery

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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 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>() { 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; }    }


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消