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

效果如图：

自定义一个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;780px;border-bottom:5px normal">');
            if (!frozen){
                cc.push('<div class="titleTips">');
                cc.push('<p><span class="c-label">主题:</span> <a href="feedbackDetail.html" target="detailFrame" onclick="queryDetail('+rowData["feedbackId"]+')">' + rowData["title"] + '</a></p>');
                cc.push('<p><span class="c-label" style="float:left">内容:</span><div style="padding-left:45px">' + rowData["content"] + '</div></p>');
                cc.push('<p><span class="c-label">类别:</span> ' + rowData["type"] );
                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>');
                cc.push('</div>');
                cc.push('<hr style="border:1px dashed black; height:1px">');
            }
            cc.push('</td>');
            return cc.join('');
        }
    });

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

    $("#feedbackTable").datagrid({
            height: 'auto',
            idField: 'feedbackId',
            fitColumn: true,
            rownumbers:true,
            loadMsg:"数据查询中，请等待……",
            pageSize:10,
            singleSelect:true,
            pagination:true,
            view: cardview
        });
        setPagination('feedbackTable');
    });