首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery EasyUI之DataGrid使用实例详解

Posted in Javascript onJanuary 04, 2016

jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页,可以下载完整开发包，里面有示例代码可以参考。

运行效果图：

jQuery EasyUI之DataGrid使用实例详解

由于我使用的是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; } 
}

以上就是jQuery EasyUI之DataGrid使用实例简单介绍，希望对大家的学习有所帮助。

jQuery EasyUI之DataGrid使用实例详解

- Author -

guwei4037

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
学习ExtJS Column布局
Oct 08 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
javascript生成大小写字母
Jul 03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
Jan 04 #Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 #Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 #Javascript
小喇叭(1) 脏读(2) 克隆(1) S-2000(1) 温控(1) 外键(1) 小喇叭开始广播了(1) 微信(2) IC-R9500(1) 增删查改(1)
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
python检测远程服务器tcp端口的方法
2015/03/14 Python
python定时器（Timer）用法简单实例
2015/06/04 Python
Python验证码识别处理实例
2015/12/28 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python实现电子词典
2020/03/03 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
怀俄明州飞钓：Platte River Fly Shop
2017/12/28 全球购物
写自荐信三大法宝
2014/01/24 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
法人授权委托书样本
2014/09/19 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
送给教师们，到底该如何写好教学反思？
2019/07/02 职场文书
2020年元旦祝福语录，总有适合你的
2019/12/31 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis