之前很少会用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
