JQueryEasyUI-DataGrid顯示資料，條件查詢，排序及分頁
阿新 • • 發佈：2019-01-06
----------------顯示列表.aspx-------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="顯示列表.aspx.cs" Inherits="MyStartEasyUi.Datagrid.顯示列表" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#cc").layout();
})
</script>
</head>
<body>
<div id="cc" fit="true">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
</div>
<div data-options="region:'center',title:'我是中間面板'" style="overflow:hidden;" href='/tabs/tabChild/UserManager.htm'>
</div>
</div>
</body>
</html>
-------------------UserManager.htm-------------------
<script type="text/javascript">
$(function () {
$("#divLayout").layout();
$("#tblUserList").datagrid({
url: '/ashx/UserManager.ashx',
title: '',
loadMsg: '資料載入中,請稍候...',
nowrap: false,
pageSize: 10,
pageList: [10, 20, 30],
columns: [[ //注意要兩個巢狀的中括號
{ field: 'Id', title: '編號', width: 120, align: 'center', sortable: true },
{ field: 'LoginId', title: '使用者ID', width: 120, align: 'left', sortable: true },
{ field: 'Name', title: '使用者名稱稱', width: 120, align: 'left', sortable: true },
{ field: 'Address', title: '使用者地址', width: 120, align: 'left', sortable: true }
]],
fitColumns: true,
singleSelect: true,
pagination: true,
sortOrder: "asc",
sortName: "Id", //初始化時按Id升序排序
toolbar: [{
iconCls: 'icon-add',
text: '新增',
handler: function () { alert('Add') }
}, '-', { //分隔符
iconCls: 'icon-edit',
text: '編輯',
handler: function () { alert('edit') }
}, '-', {
iconCls: 'icon-remove',
text: '刪除',
handler: function () {
alert('delete')
}
}, '-', {
iconCls: 'icon-search',
text: '查詢',
handler: function () {
alert('search')
}
}]
});
});
//按使用者自定義查詢條件查詢，呼叫datagird的load方法，傳遞name查詢條件
function QueryData() {
$("#tblUserList").datagrid("load", {
"name":$("#tblQuery").find("input[name='txtName']").val()
});
}
//清除查詢條件
function ClearQuery() {
$("#tblQuery").find("input").val("");
}
</script>
<div id="tt" class="easyui-tabs" fit="true" border="false">
<div title="使用者管理">
<div id="divLayout" fit="true">
<div data-options="region:'north',split:false" style="height: 60px;padding-top:6px;" border="false">
<!--高階查詢部分-->
<table id="tblQuery" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>
使用者名稱:
</th>
<td>
<input name="txtName" />
</td>
</tr>
<tr>
<th>
註冊時間:
</th>
<td>
<input name="txtRegStartTimeStart" class="easyui-datetimebox" editable="false" /> 至
<input name="txtRegStartTimeEnd" class="easyui-datetimebox" editable="false" />
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" src="javascript:void(0)" onclick="QueryData()" plain="true">查詢</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" src="javascript:void(0)" onclick="ClearQuery()" plain="true">清空</a>
</td>
</tr>
</table>
</div>
<div data-options="region:'center',split:false" border="false">
<!--顯示資料列表部分-->
<table id="tblUserList" fit="true">
</table>
</div>
</div>
</div>
</div>
---------------------後臺一般處理程式UserManager.ashx---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
namespace MyStartEasyUi.ashx
{
/// <summary>
/// UserManager 的摘要說明
/// </summary>
public class UserManager : IHttpHandler
{
UsersExtendBll bll = new UsersExtendBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex = GetPageIndex(context);
int pageSize= GetPageSize(context);
string mySort = GetSort(context) + " " + GetOrder(context);
string queryName = GetQueryName(context);
string whereStr = "";
if (!string.IsNullOrEmpty(queryName))
{
whereStr += " name like '%" + queryName + "%'";
}
DataSet dsGet = bll.GetListByPage(whereStr, mySort, (pageIndex - 1) * pageSize + 1, pageIndex * pageSize);
List<MyBookShop.Model.Users> lst = bll.DataTableToList(dsGet.Tables[0]);
int total = bll.GetRecordCount("");
JavaScriptSerializer js = new JavaScriptSerializer();
string jsonStrings = js.Serialize(lst);
string returnJson = "{\"total\":"+ total.ToString() + ",\"rows\":" + jsonStrings +"}";
//返回Json格式total表示總數,rows表示返回的資料,這樣返回才能分頁
System.Threading.Thread.Sleep(2000);
context.Response.Write(returnJson);
}
public bool IsReusable
{
get
{
return false;
}
}
public Int32 GetPageSize(HttpContext context)
{
try
{
return Int32.Parse(context.Request["rows"].ToString());
}
catch
{
return 10;
}
}
public string GetOrder(HttpContext context)
{
return context.Request.Form["order"];
}
public string GetSort(HttpContext context)
{
return context.Request.Form["sort"];
}
public string GetQueryName(HttpContext context)
{
return context.Request.Form["name"];
}
public Int32 GetPageIndex(HttpContext context)
{
try
{
return Int32.Parse(context.Request["page"].ToString());
}
catch
{
return 1;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="顯示列表.aspx.cs" Inherits="MyStartEasyUi.Datagrid.顯示列表" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#cc").layout();
})
</script>
</head>
<body>
<div id="cc" fit="true">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
</div>
<div data-options="region:'center',title:'我是中間面板'" style="overflow:hidden;" href='/tabs/tabChild/UserManager.htm'>
</div>
</div>
</body>
</html>
-------------------UserManager.htm-------------------
<script type="text/javascript">
$(function () {
$("#divLayout").layout();
$("#tblUserList").datagrid({
url: '/ashx/UserManager.ashx',
title: '',
loadMsg: '資料載入中,請稍候...',
nowrap: false,
pageSize: 10,
pageList: [10, 20, 30],
columns: [[ //注意要兩個巢狀的中括號
{ field: 'Id', title: '編號', width: 120, align: 'center', sortable: true },
{ field: 'LoginId', title: '使用者ID', width: 120, align: 'left', sortable: true },
{ field: 'Name', title: '使用者名稱稱', width: 120, align: 'left', sortable: true },
{ field: 'Address', title: '使用者地址', width: 120, align: 'left', sortable: true }
]],
fitColumns: true,
singleSelect: true,
pagination: true,
sortOrder: "asc",
sortName: "Id", //初始化時按Id升序排序
toolbar: [{
iconCls: 'icon-add',
text: '新增',
handler: function () { alert('Add') }
}, '-', { //分隔符
iconCls: 'icon-edit',
text: '編輯',
handler: function () { alert('edit') }
}, '-', {
iconCls: 'icon-remove',
text: '刪除',
handler: function () {
alert('delete')
}
}, '-', {
iconCls: 'icon-search',
text: '查詢',
handler: function () {
alert('search')
}
}]
});
});
//按使用者自定義查詢條件查詢，呼叫datagird的load方法，傳遞name查詢條件
function QueryData() {
$("#tblUserList").datagrid("load", {
"name":$("#tblQuery").find("input[name='txtName']").val()
});
}
//清除查詢條件
function ClearQuery() {
$("#tblQuery").find("input").val("");
}
</script>
<div id="tt" class="easyui-tabs" fit="true" border="false">
<div title="使用者管理">
<div id="divLayout" fit="true">
<div data-options="region:'north',split:false" style="height: 60px;padding-top:6px;" border="false">
<!--高階查詢部分-->
<table id="tblQuery" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>
使用者名稱:
</th>
<td>
<input name="txtName" />
</td>
</tr>
<tr>
<th>
註冊時間:
</th>
<td>
<input name="txtRegStartTimeStart" class="easyui-datetimebox" editable="false" /> 至
<input name="txtRegStartTimeEnd" class="easyui-datetimebox" editable="false" />
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" src="javascript:void(0)" onclick="QueryData()" plain="true">查詢</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" src="javascript:void(0)" onclick="ClearQuery()" plain="true">清空</a>
</td>
</tr>
</table>
</div>
<div data-options="region:'center',split:false" border="false">
<!--顯示資料列表部分-->
<table id="tblUserList" fit="true">
</table>
</div>
</div>
</div>
</div>
---------------------後臺一般處理程式UserManager.ashx---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
namespace MyStartEasyUi.ashx
{
/// <summary>
/// UserManager 的摘要說明
/// </summary>
public class UserManager : IHttpHandler
{
UsersExtendBll bll = new UsersExtendBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex = GetPageIndex(context);
int pageSize= GetPageSize(context);
string mySort = GetSort(context) + " " + GetOrder(context);
string queryName = GetQueryName(context);
string whereStr = "";
if (!string.IsNullOrEmpty(queryName))
{
whereStr += " name like '%" + queryName + "%'";
}
DataSet dsGet = bll.GetListByPage(whereStr, mySort, (pageIndex - 1) * pageSize + 1, pageIndex * pageSize);
List<MyBookShop.Model.Users> lst = bll.DataTableToList(dsGet.Tables[0]);
int total = bll.GetRecordCount("");
JavaScriptSerializer js = new JavaScriptSerializer();
string jsonStrings = js.Serialize(lst);
string returnJson = "{\"total\":"+ total.ToString() + ",\"rows\":" + jsonStrings +"}";
//返回Json格式total表示總數,rows表示返回的資料,這樣返回才能分頁
System.Threading.Thread.Sleep(2000);
context.Response.Write(returnJson);
}
public bool IsReusable
{
get
{
return false;
}
}
public Int32 GetPageSize(HttpContext context)
{
try
{
return Int32.Parse(context.Request["rows"].ToString());
}
catch
{
return 10;
}
}
public string GetOrder(HttpContext context)
{
return context.Request.Form["order"];
}
public string GetSort(HttpContext context)
{
return context.Request.Form["sort"];
}
public string GetQueryName(HttpContext context)
{
return context.Request.Form["name"];
}
public Int32 GetPageIndex(HttpContext context)
{
try
{
return Int32.Parse(context.Request["page"].ToString());
}
catch
{
return 1;
}
}
}