jquery easyui ページング チュートリアルの例

Web 開発では、手書きのコードに依存すると、コードが多くなり、スタイルが良くない場合があります。ここでは、jquery easyui の ページネーション関数 を紹介します。とても便利で簡単です

あとは、「jquery After EasyUI Framework使用法ドキュメント」に必要なファイルが含まれているので、$(function(){ });に次のコードを挿入するだけです:

 $('#pp').pagination(options);

Paginationの具体的な使い方を紹介しましょう。まず、属性を見てみましょう:

属性名 type 説明 デフォルト値

total Number ページング確立時のレコードの総数を設定します 1

pageSize Number 各ページに表示される数 10

pageNumber Number ページング確立時に、表示されるページの数 1

pageList 配列 ユーザーは各ページを変更できます。 ページのサイズ、

pageList 属性は、変更できるサイズの数を定義します [10,20,30,50]

loading ブール値によって定義されます。データはロードされています false

buttons 配列はカスタム ボタンを定義し、各ボタンには 2 つのプロパティが含まれます:

iconCls: 背景画像を表示するための CSS クラス

handler: ボタンがクリックされたときのハンドラー関数 null

showPageList ブール値は、ページリストを表示します true

showRefresh ブール値は、更新ボタンを表示するかどうかを定義します true

beforePageText 文字列は、入力ボックスグループの前に表示されるラベルですPage

afterPageText 文字列は、{pages} の入力ボックスコンポーネントの後に表示されるラベルです

displayMsg文字列はページの情報を表示します。

{total} 件中 {from} から {to} までを表示 イベント イベント名 パラメーター 説明 onSelectPage pageNumber、pageSize ユーザーが新しいページを選択するとトリガーされ、コールバック関数 には 2 つのパラメーターが含まれます: pageNumber: 新しいページのページ番号 pageSize : 新しいページのサイズ onBeforeRefresh pageNumber、pageSize は、更新ボタンがクリックされる前にトリガーされます。 false が返された場合、onRefresh pageNumber、pageSize は、ページ サイズが変更された後にトリガーされます。 . デモ

1. データの抽出と表示。

DataGrid は、url 属性を通じてデータを取得します。例: url:'ListInfo.action'。このように、Action でメソッドを呼び出すことによってデータが取得されます。返されるのは JSON 文字列です。 JSON 文字列は、DataGrid によって定義されたデータ形式に従って組み立てられる必要があることに注意してください。このデータ形式については、前回の記事の添付ファイルを参照してください。 JSON 文字列の合計フィールドの値がデータ項目の数であり、データ ページングに使用されることが特に強調されます。

2. データページング。

データ ページングは​​フォアグラウンド ページングとバックグラウンド ページングに分かれており、DataGrid はカプセル化されています。 DataGrid は、rows (ページごとの項目数) と page (現在のページ番号) という 2 つのパラメーターを定義します。これらの 2 つのパラメーターは、それぞれ属性 pageSize と pageNumber に対応します。ユーザーは pageSize 属性と pageNumber 属性で設定することも、設定しないこともできるので、デフォルト値が使用されます。 Action で必要なのは、private int rows と private int page という 2 つの変数を定義し、SQL ステートメントを通じて必要な値を取得することだけです。ページングのSQL文(Oracle)は以下の通りです。

抽出したデータの数を合計フィールドに代入し、それを組み立ててJSON文字列で返すとページングが実現できます。もちろん、pagination:true, は必ず必要です。

3. データ操作。

データ操作は大きく分けて表示、削除に分けられます。表示の場合は、onClickRow または onDblClickRow イベントを通じて実現できます。例:

$(function(){

$('#test').datagrid({

title:'数据列表',

width:900,

height:500,

.......(省略的属性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}}

ダブルクリックすると表示されます。

削除に関しては、削除ボタンをクリックしてdeleteメソッドを呼び出すことができます。 JSON文字列を組み立てる際に、OPERATIONフィールドに削除ボタンを割り当てることができます。 {field:'OPERATION', title: 'Operation', width: 120}と設定することで、ページ上に削除ボタンを表示できます。削除の実装は以下の通りです:

function DelAff(){

$.messager.confirm('确认','是否真的删除?',function(r){ 

if (r){ 

var selected = $('#test').datagrid('getSelected');

if (selected){

var index = $('#test').datagrid('getRowIndex', selected);

$('#test').datagrid('deleteRow', index);

DeleteSubmit(selected);

}

}

});

}

function DeleteSubmit(selected)

{

var url="DataDelete.action?Id="+selected.ID;

$.post(

url     

);

}

このようにして、ページの削除とデータベースの削除の両方が実現されます。

4. 解決すべき問題

返されたデータが空の場合、IE ブラウザ のページにバグが存在します。私の解決策は、各フィールドを "" に設定して、空のコンテンツ データの行がページに表示されるようにすることです。この問題に遭遇して解決したことがあれば、アドバイスをお願いします。

以上がjquery easyui ページング チュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。