您的位置:首页 > 产品设计 > UI/UE

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

2013-02-17 11:15 441 查看
效果如图:



自定义一个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;width: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');
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: