以前はトラブルが怖かったので、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/>