欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

EasyUI的datagrid自定义view

程序员文章站 2022-07-13 17:14:27
...
  <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数组中间的代码全部删除,添加自己所需要的页面布局就可以了。