EasyUI的datagrid自定义view

  <script>
        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;">');
                if (!frozen && rowData.itemid){
                    var aa = rowData.itemid.split('-');
                    var img = 'shirt' + aa[1] + '.gif';
                    cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
                    cc.push('<div style="float:left;margin-left:20px;">');
                    for(var i=0; i<fields.length; i++){
                        var copts = $(target).datagrid('getColumnOption', fields[i]);
                        cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
                    }
                    cc.push('</div>');
                }
                cc.push('</td>');
                return cc.join('');
            }
        });
        $(function(){
            $('#tt').datagrid({
                view: cardview
            });
        });
    </script>


<script type="text/javascript">
	var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
                        renderRow: function (target, fields, frozen, rowIndex, rowData) {
                            var cc = [];
                            cc.push('<div style="width:600px;overflow: hidden; padding: 4px 20px;">');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;float:left;width:49%;"><b>姓名：</b><span>'+rowData[fields[0]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;float:left;width:49%;"><b>性别：</b><span>'+rowData[fields[1]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;float:left;width:49%;"><b>出生年月：</b><span>'+rowData[fields[2]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;float:left;width:49%;"><b>民族：</b><span>'+rowData[fields[3]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;float:left;width:49%;"><b>电话：</b><span>'+rowData[fields[4]]+'</span></div>');
                            cc.push('<br/><br/><br/><br/><br/><br/><br/><br/>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;"><b>现病史：</b><span>'+rowData[fields[5]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;"><b>既往史：</b><span>'+rowData[fields[6]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;"><b>个人史：</b><span>'+rowData[fields[7]]+'</span></div>');
                            cc.push('<div style="margin-top:10px;margin-bottom:10px;"><b>家族史：</b><span>'+rowData[fields[8]]+'</span></div>');
                            cc.push('</div>');
                            
                            return cc.join('');
                        }
                    });
	$(function(){
            $('#tt').datagrid({
                view: cardview
            });
        });
</script> 

easyui官方demo用PHP加载数据，for循环添加到自定义view。可以自己去任意的布局整个datagrid的view，cc数组中间的代码全部删除，添加自己所需要的页面布局就可以了。