请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

jQuery EasyUI中,卡片视图(Card View)能够为数据网格(datagrid)提供更灵活的布局。

卡片视图工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格的头部,您可以仅仅通过点击列的头部来排序数据。

下述的示例将向您展示如何创建自定义卡片视图(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('');
     }
 });

创建数据网格(DataGrid)

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

  <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属性,且它的值为我们的卡片视图。

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid16.zip



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery EasyUI 数据网格 – 创建页脚摘要发布时间:2022-01-28
下一篇:
jQuery EasyUI 数据网格 – 合并单元格发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap