jQuery EasyUIのDataGrid使用例を詳しく解説_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery EasyUIのDataGrid使用例を詳しく解説_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

easyuijquery

jQuery EasyUI は、プログラマがフロントエンドコード開発の量を減らすのに役立つ多くの既成コンポーネントを提供する軽量の Web フロントエンド開発フレームワークです。DataGrid は以前のプロジェクトで使用されていました。
jQuery EasyUI フレームワークの公式ホームページから、参照用のサンプルコードを含む完全な開発パッケージをダウンロードできます。

オペレーションレンダリング:

私は ASP.NET Web フォームテクノロジを使用しているため、参考のために以下にメインコードを投稿します。
コンポーネントを使用できるように、ページ内で最初に関連する 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> 
 <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 はグリッドのテーブル部分であり、上記の js 部分のグリッドに対応します。
ページの分離コード部分:

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 の使用例を簡単に紹介したものであり、皆様の学習に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。