jQuery EasyUI使用教程之建立數據網格的自定義視圖

<jQuery EasyUI最新試用版免費下載>

在不一樣的狀況下，您可能須要爲數據網格運用更靈活的佈局，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的教程！