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的教程！