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 });
