jQuery EasyUI之DataGrid使用实例详解

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

运行效果图:

由于我使用的是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使用实例简单介绍,希望对大家的学习有所帮助。

(0)

相关推荐

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

    最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的url属性定义为其他项目的url地址即可,可是测试下发现的确是返回了json数据但是json数据提示"invalid label" 错误,网上搜索了下错误解决办法,参考 "JavaScript处理Json的invalid label错误解决办法"的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误,感觉原因不在格

  • jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉. 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果. 现在我们来看看原的编辑:来自Easyui 1.5.1的Demo <demo/datagrid/rowediting.html> 接下来,我们主要是要高度自由的编辑实现: 1.可以同时追加多行 2.追加的行可以是任何位置 3.可以随时进行编辑任意位置的行 4.保存再统一验证 实现 在原有的r

  • jQuery EasyUI学习教程之datagrid点击列表头排序

    这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q

  • jquery easyui datagrid实现增加,修改,删除方法总结

    本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

  • jQuery easyui datagrid动态查询数据实例讲解

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

  • jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

    需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function() { //searchbox $('#selectgoods-keywords').searchbox({ searcher: function(val, name) { searchInfo

  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

  • jQuery中ajax - get() 方法实例详解

    在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

  • jQuery表单插件ajaxForm实例详解

    前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

  • jquery easyui validatebox remote的使用详解

    validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options

  • jquery 校验中国身份证号码实例详解

    jquery 校验中国身份证号码实例详解 大陆18位身份证(第二代身份证) 身份号码是一组具有特征组合码,由十七位数字本体码和一位校验码组成. 排列顺序从左至右依次为:六位数字地区码,八位数字生日码,三位数字顺序码和一位数字校验码. 校验方法: (1)先对前17位数字的权求和 S = Sum(Ci * Vi), i = 0, ... , 16 Ci:表示身份证号码上第i位置的数字值 Vi:表示第i位置上的"加权因子" 加权因子Vi: 7 9 10 5 8 4 2 1 6 3 7 9 1

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

  • jquery.picsign图片标注组件实例详解

    经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多 因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle

  • jQuery中DOM 属性使用实例详解下篇

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • jQuery中DOM 属性使用实例详解上篇

    目录 DOM属性(上) .addClass() .removeClass() .toggleClass() .hasClass() DOM属性(上) .addClass() 为每个匹配的元素添加指定的样式类名 值得注意的是这个方法不会替换一个样式类名.它只是简单的添加一个样式类名到元素上. 对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样: $("p").addClass("myClass yourClass"); .addClass() 方法允许我们

  • jQuery中ajax - post() 方法实例详解

    在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

随机推荐