ajax|分頁|排序|資料
之前很少會用javascript去實現頁功能主要怕麻煩,但瞭解JQuery後這種想法發生了變化;有了這樣的指令碼組件就可以在編寫指令碼時方便和HTML隔離出來,這樣編寫高重用性的指令碼就更方便。下面就是介紹在學習JQuery過程中編寫的基於Ajax的資料查詢、排序和分頁功能的複用指令碼,只要遵循指令碼的某些規則描述HTML把指令檔引入就可以方便實現以上描述的功能。
先看下實現功能的腳代碼:
/**應用指令碼規則:
引用指令碼: JQuery指令碼和JQuery的form外掛程式指令碼
Form的ID: viewform
顯示資料的div的ID: listview
分頁按鈕HTML 屬性: pageindex="1"
排序按鈕HTML 屬性: orderfield="employeeid desc";
提效排序欄位Input的ID,Name: orderfield
提交分頁索引Input的ID,Name: pageindex
**/
function onInitPaging()
{
$("#listview").find("[@orderfield]").each(function(i)
{
var ordervalue = $(this).attr("orderfield");
$(this).click(function()
{
$("#orderfield").val(ordervalue);
onSubmitPage();
}
);
}
);
$("#listview").find("[@pageindex]").each(function(i)
{
var piValue = $(this).attr("pageindex");
$(this).click(function()
{
$("#pageindex").val(piValue);
onSubmitPage();
}
);
}
);
}
function onSubmitPage()
{
var options = {
success: function SubmitSuccess(data){
$("#listview").html(data);
onInitPaging();
}
};
$('#viewform').ajaxSubmit(options);
}
$(document).ready(
function()
{
$("#search").click(function(){
$("#pageindex").val('0');
onSubmitPage()
});
onSubmitPage();
}
);
約束規則巧用了html的自訂屬性,以上代碼描述查詢,排序和分頁的ajax提交處理。在編寫HTML時只需要遵循描述的規則即可,你並不需要在編寫任何指令碼代碼;只需要把指令碼添加到頁面裡:
http://www.knowsky.com
<script src=jquery-latest.js></script>
<script src=form.js></script>
<script src=calendar.js></script>
<script src=calendar-setup.js></script>
<script src="lang/calendar-en.js"></script>
<script src=pagination.js></script>
<form id="viewform" method="post" action="FrmOrderView.aspx">
<input id="orderfield" name="orderfield" type="hidden" value="" />
<input id="pageindex" name="pageindex" type="hidden" value ="0"/>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td valign="top" align="left">
<table width="550" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 63px; height: 17px; background-color: gainsboro;">
CompanyName</td>
<td style="width: 114px; height: 17px;">
<input id="Text1" name="companyname" type="text" /></td>
<td style="width: 63px; height: 17px; background-color: gainsboro;">
ShipCity</td>
<td style="width: 126px; height: 17px;">
<input id="Text2" name="shipcity" type="text" /></td>
</tr>
<tr>
<td style="width: 63px; height: 14px; background-color: gainsboro;">
OrderDate</td>
<td style="width: 240px; height: 14px;" align="left">
<input id="Text3" name="OrderDate_Begin" type="text" />
<input id="button1" DateField="Text3" type="button" value="..." /></td>
<td style="width: 63px; height: 14px; background-color: gainsboro;">
</td>
<td style="width: 240px; height: 14px;" align="left">
<input id="Text4" type="text" name="OrderDate_End" />
<input id="button2" DateField="Text4" type="button" value="..." /></td>
</tr>
<tr>
<td style="height: 50px" align="left" colspan="4">
<input id="search" type="button" value="Search" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="99%">
<div id="listview"></div>
</td>
</tr>
</table>
</form>
資料提供頁面:
<%@ Page Language="C#" AutoEventWireup="true" Inherits="HFSoft.MVC.DataViewContext" %>
<%@ Import Namespace="NorthWind.Entities" %>
<%
HFSoft.MVC.IDataViewContext dataview = (HFSoft.MVC.IDataViewContext)this;
%>
<table width="100%" >
<% if(dataview.PageCount >0){%>
<tr>
<td colspan="7" style="height: 20px">
<a href="#" pageindex="0" >首頁</a>
<a href="#" pageindex="<% =dataview.PrevPage%>">上一頁</a>
<a href="#" pageindex="<% =dataview.NextPage %>" >下一頁</a>
<a href="#" pageindex="<% =dataview.PageCount-1%>">末頁</a>
當前<%=dataview.PageIndex+1%>頁/共<%=dataview.PageCount %>頁
</td>
</tr>
<%}%>
<tr>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("CompanyName")%>" >CustomerName</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("Employees.EmployeeID")%>" >EmployeeName</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("OrderDate")%>" >OrderDate</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("RequiredDate")%>" >RequireDate</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
ShipAddress</td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
ShipCity</td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
SipCountry</td>
</tr>
<%foreach(Order_v item in dataview.DataItems)
{ %>
<tr>
<td style="width: 100px"><%=dataview.ToValue(item.CustomerName)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.EmployeeName)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.OrderDate, "{0:d}")%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.RequiredDate, "{0:d}")%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.ShipAddress)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.ShipCity)%>
</td>
<td style="width: 100px"><% =dataview.ToValue(item.ShipCountry)%>
</td>
</tr>
<% } %>
</table>
資料提供頁相關Controller代碼:
[HFSoft.MVC.FormMapper("~/frmorderview.aspx")]
public void OrderView()
{
HFSoft.MVC.IDataViewContext viewcontext = (HFSoft.MVC.IDataViewContext)this.FormContext;
IExpression exp;
FieldAdapter[] orderby = null;
OrderSearch search = viewcontext.BindObject<OrderSearch>();
exp = search.GetExpression();
if (viewcontext.OrderField != null && viewcontext.OrderField != string.Empty)
{
orderby = new FieldAdapter[]{new FieldAdapter(viewcontext.OrderField, null)};
}
Region region = new Region(viewcontext.PageIndex * 10, viewcontext.PageIndex * 10+10);
viewcontext.DataItems = exp.List<Order_v>(region, orderby);
viewcontext.PageSize = 10;
viewcontext.RecordCount = exp.CountOf<Order_v>();
}
下載常式代碼和腳源碼:http://www.cnblogs.com/Files/henryfan/AjaxSearchDataSample.rar