easyui datagrid 自定义每行显示的格式

效果如图：

自定义一个view：

 1 var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
 2         renderRow: function(target, fields, frozen, rowIndex, rowData){
 3             var cc = [];
 4             cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;width:780px;border-bottom:5px normal">');
 5             if (!frozen){
 6                 cc.push('<div class="titleTips">');
 7                 cc.push('<p><span class="c-label">主题:</span> <a href="feedbackDetail.html" target="detailFrame" onclick="queryDetail('+rowData["feedbackId"]+')">' + rowData["title"] + '</a></p>');
 8                 cc.push('<p><span class="c-label" style="float:left">内容:</span><div style="padding-left:45px">' + rowData["content"] + '</div></p>');
 9                 cc.push('<p><span class="c-label">类别:</span> ' + rowData["type"] );
10                 cc.push('<span style="float:right;white-space: nowrap;"><span class="c-label">反馈人:</span> ' + rowData["feedbackUser"] + '<span class="c-label" style="padding-left:20px">时间:</span> ' + rowData["feedbackTime"] + '</span></span></p>');
11                 cc.push('</div>');
12                 cc.push('<hr style="border:1px dashed black; height:1px">');
13             }
14             cc.push('</td>');
15             return cc.join('');
16         }
17     });

然后在初始化datagrid时引用上述定义的view：

 1     $("#feedbackTable").datagrid({
 2             height: 'auto',
 3             idField: 'feedbackId',
 4             fitColumn: true,
 5             rownumbers:true,
 6             loadMsg:"数据查询中，请等待……",
 7             pageSize:10,
 8             singleSelect:true,
 9             pagination:true,
10             view: cardview
11         });
12         setPagination('feedbackTable');
13     });

 

 

posted @ 2013-02-17 11:15  Vincent.Pei  阅读(1892)  评论(0)  编辑  收藏  举报