JQuery EasyUI DataGrid
2502 ワード
最近、プロジェクトではJQuery EasyUI DataGridが使用されています.表の実装をカプセル化し、多くの便利さを提供していますが、使用中にはいくつかの困難と問題が発生します.現在、問題はすべて解決して、特に私がDataGridを使って開発した経験を分かち合います.(PS:JSPとJ 2 EEのフレームワーク開発を使っています).
1.データの抽出と表示.
DataGridはurl属性でデータを取得します.例えばurl:'ListInfo.Action'は、Actionのメソッドを呼び出すことでデータを取得します.JSON文字列を返します.なお、JSON文字列は、DataGridで定義されたデータ形式で綴る必要があります.このデータフォーマットは、私の前の文章の添付ファイルを参考にすることができます.特に,JSON文字列におけるtotalドメインの値は,データのページングに用いるデータの本数であることを強調する.
2.データのページング.
データのページングはフロントページングとバックグラウンドページングに分けられ,フロントページングではDataGridがカプセル化されている.DataGridは、プロパティpageSize,pageNumberに対応するrows(ページごとのバー数)、page(現在のページ数)の2つのパラメータを定義します.ユーザーは、pageSize、pageNumberプロパティで設定するか、設定しないかでデフォルト値をとることができます.Actionで2つの変数、private int rowsを定義するだけです.private int page; 次に、SQL文から取得する値を取得します.ページングされたSQL文(Oracle)は次のとおりです.
このように抽出したデータの本数をtotalドメインに割り当て,JSON文字列に綴じて返すことで,ページングを実現できる.もちろん、pagination:trueは、もちろん必要です.
3.データの操作.
データの操作は大きく分けて、表示、削除します.表示については、onClickRowイベントまたはonDblClickRowイベントで実装できます.次のようになります.
これでダブルクリックで表示できます.
削除については、削除ボタンをクリックして削除方法を呼び出すことで実現できます.削除ボタンは、JSON文字列を綴るときにOPERATIONドメインに値を付けることで、{field:'OPERATION',title:'操作',width:120}を設定することで、ページに削除ボタンを表示できます.削除されたインプリメンテーションは、次のとおりです.
コード#コード#
このようにページの削除とデータベースの削除が実現されます.
1.データの抽出と表示.
DataGridはurl属性でデータを取得します.例えばurl:'ListInfo.Action'は、Actionのメソッドを呼び出すことでデータを取得します.JSON文字列を返します.なお、JSON文字列は、DataGridで定義されたデータ形式で綴る必要があります.このデータフォーマットは、私の前の文章の添付ファイルを参考にすることができます.特に,JSON文字列におけるtotalドメインの値は,データのページングに用いるデータの本数であることを強調する.
2.データのページング.
データのページングはフロントページングとバックグラウンドページングに分けられ,フロントページングではDataGridがカプセル化されている.DataGridは、プロパティpageSize,pageNumberに対応するrows(ページごとのバー数)、page(現在のページ数)の2つのパラメータを定義します.ユーザーは、pageSize、pageNumberプロパティで設定するか、設定しないかでデフォルト値をとることができます.Actionで2つの変数、private int rowsを定義するだけです.private int page; 次に、SQL文から取得する値を取得します.ページングされたSQL文(Oracle)は次のとおりです.
1. select * from(
2. select rownum r, field1,field2 from table_name where rownum <= page* rows(
3. )
4. where r > (page-1) * rows
このように抽出したデータの本数をtotalドメインに割り当て,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);
}}
これでダブルクリックで表示できます.
削除については、削除ボタンをクリックして削除方法を呼び出すことで実現できます.削除ボタンは、JSON文字列を綴るときにOPERATIONドメインに値を付けることで、{field:'OPERATION',title:'操作',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
);
}
このようにページの削除とデータベースの削除が実現されます.