溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 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" > <div align="center" > <input id="sfz" runat="server" type="text" placeholder="請掃描檔案袋上面的條形碼..." /> <button id="ssss"> 檔案查詢</button> </div> </div> <div > <table id="grid"> </table> </div> <div > <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; }
}最終的效果圖：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
