jQuery EasyUIチュートリアルを使用してデータ・グリッドを作成するカスタム・ビュー
5035 ワード
異なる状況では、データ・グリッドのより柔軟なレイアウトを使用する必要がある場合があります.Cardviewは良い選択です.このツールは、データ・グリッドでデータを迅速に取得および表示できます.データ・グリッドのヘッダーでは、列のヘッダーをクリックするだけでデータをソートできます.このチュートリアルでは、カスタムCardviewの作成方法を説明します.
jQuery EasyUIのデモの表示
Card Viewの作成
データ・グリッドのデフォルト・ビューから継承することは、カスタム・ビューを作成するのに良い方法です.各ローに情報を表示するCard Viewを作成します.
var cardview = $.extend({}, $.fn.datagrid.defaults.view, { renderRow: function (target, fields, frozen, rowIndex, rowData){ var cc = []; cc.push( '<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">' ); if (!frozen){ var aa = rowData.itemid.split( '-' ); var img = 'shirt' + aa[1] + '.gif' ; cc.push( '<img src="images/' + img + '" style="width:150px;float:left">' ); cc.push( '<div style="float:left;margin-left:20px;">' ); for ( var i=0; i<fields.length; i++){ var copts = $(target).datagrid( 'getColumnOption' , fields[i]); cc.push( '<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>' ); } cc.push( '</div>' ); } cc.push( '</td>' ); return cc.join( '' ); } }); データ・グリッドの作成
次に、ビューを使用してデータ・グリッドを作成します.
< table id = "tt" style = "width:500px;height:400px" title = "DataGrid - CardView" singleSelect = "true" fitColumns = "true" remoteSort = "false" url = "datagrid8_getdata.php" pagination = "true" sortOrder = "desc" sortName = "itemid" > < thead > < tr > < th field = "itemid" width = "80" sortable = "true" >Item ID</ th > < th field = "listprice" width = "80" sortable = "true" >List Price</ th > < th field = "unitcost" width = "80" sortable = "true" >Unit Cost</ th > < th field = "attr1" width = "150" sortable = "true" >Attribute</ th > < th field = "status" width = "60" sortable = "true" >Status</ th > </ tr > </ thead > </ table > $( '#tt' ).datagrid({ view: cardview }); viewプロパティを設定し、card viewの値を設定することに注意してください.
EasyUIのダウンロード例:easyui-datagrid-demo.zip
興味のある方は、jQuery EasyUIに関するチュートリアルをクリックしてご覧ください.