雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

时间:2021-08-03 10:33:12

  jQuery EasyUI 数据网格 - 创建自定义视图

  在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说,卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图(Card View)。

雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

  创建卡片视图(Card View)

  从数据网格(datagrid)的默认视图继承,是个创建自定义视图的不错方法。我们将要创建一个卡片视图(Card View)来为每行显示一些信息。

  var cardview = $.extend({}, $.fn.datagrid.defaults.view, {

  renderRow: function(target, fields, frozen, rowIndex, rowData){

  var cc = [];

  cc.push('');

  if (!frozen){

  var aa = rowData.itemid.split('-');

  var img = 'shirt' + aa[1] + '.gif';

  cc.push('雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图');

  cc.push('

');

  for(var i=0; i<fields.length; p="" i++){<="">

  var copts = $(target).datagrid('getColumnOption', fields[i]);

  cc.push('

' + copts.title + ': ' + rowData[fields[i]] + '

');

  }

  cc.push('

');

  }

  cc.push('');

  return cc.join('');

  }

  });

  创建数据网格(DataGrid)

  现在我们使用视图创建数据网格(datagrid)。

  

  title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"

  url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">

  

  

  

  

  

  

  

  

  

  

Item ID List Price Unit Cost Attribute Status

  $('#tt').datagrid({

  view: cardview

  });

  请注意,我们设置 view 属性,且它的值为我们的卡片视图。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid16.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)