EasyUI的datagrid自定义view

来源：互联网发布：淘宝ccr手表怎么样编辑：程序博客网时间：2024/06/06 18:18
  <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数组中间的代码全部删除，添加自己所需要的页面布局就可以了。
0 0