之前很少會用javascript去實現頁功能主要怕麻煩,但了解JQuery後這種想法發生了變化;有了這樣的腳本組件就可以在編寫腳本時方便和HTML隔離出來,這樣編寫高重用性的腳本就更方便。以下就是介紹在學習JQuery過程中編寫的基於Ajax的資料查詢、排序和分頁功能的複用腳本,只要遵循腳本的某些規則描述HTML把腳本檔案引入就可以方便實現以上描述的功能。
先看下實作功能的程式碼:
/**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewform 显示数据的p的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時只需要遵循描述的規則即可,你並不需要在寫任何腳本程式碼;只需要把腳本加入頁面:
<br/>