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