教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jquery easyui自定义DataGrid视图

jquery easyui自定义DataGrid视图

发布时间:2015-12-29   编辑:jiaochengji.com
本文介绍了jquery easyui中自定义datagrid视图的方法,jquery easyui datagrid实例代码,有需要的朋友参考下。

在DataGrid中自定义视图可以做各种个性化的显示方式。

例子,建立一个CardView的视图,说明定义一个视图的方法。

效果图:

jquery easyui自定义datagrid视图

1,通过扩展$.fn.datagrid.defaults.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:5px;border:0;">'); 
        if (!frozen){ 
            cc.push('<img src="images/' + rowData.itemid + '.png" style="height:150px;float:left">'); 
            cc.push('<div style="float:left">'); 
            for(var i=0; i<fields.length; i++){ 
                cc.push('<p>' + fields[i] + ': ' + rowData[fields[i]] + '</p>'); 
            } 
            cc.push('</div>'); 
        } 
        cc.push('</td>'); 
        return cc.join(''); 
    } 
}); 

2,建立DataGrid并应用这个视图:
 

复制代码 代码示例:
$('#tt').datagrid({ 
    title:'DataGrid - CardView', 
    width:500, 
    height:400, 
    remoteSort:false, 
    singleSelect:true, 
    striped:true, 
    fitColumns:true, 
    url:'datagrid_data.json', 
    columns:[[ 
        {field:'itemid',title:'Item ID',width:80}, 
        {field:'productid',title:'Product ID',width:100,sortable:true}, 
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, 
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, 
        {field:'status',title:'Status',width:60,align:'center'} 
    ]], 
    view: cardview 
});  
 

原文地址:http://jquery-easyui.wikidot.com/tutorial:datagrid16

您可能感兴趣的文章:
jquery easyui自定义DataGrid视图
jquery easyUI创建分组属性编辑器
php使用EasyUI DataGrid获取资料的方式
jquery easyui 分页的使用方法
Jquery easyui之datagird查询框扩展示例
jquery easyui展开datagrid行显示明细数据
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
jQuery easyui datagrid动态查询数据实例讲解
jquery easyui利用DataGrid实现CRUD操作
jquery easyui combox一些实用的小方法

关键词: datagrid  easyui  jquery easyui   
[关闭]
~ ~