jQuery EasyUI 数据网格 - 创建自定义视图

下面直接给你最实用、最常见的自定义视图（custom view）方法，jQuery EasyUI datagrid 支持通过扩展默认 view 来实现超级灵活的布局，比如经典的卡片视图（Card View）、列表视图、图文混排视图等，复制粘贴就能用，领导最爱的“手机端友好、商品展示卡片”效果全都有！

方法1：最经典 - 创建卡片视图（Card View）（官方推荐，超级好看！）
每行显示为一张卡片，带图片 + 字段标签，适合商品列表、人员卡片等。

<tableid="dg"class="easyui-datagrid"title="自定义卡片视图"style="width:800px;height:500px"data-options="url:'your_data.json', fitColumns:true, singleSelect:true, pagination:true, view: cardview"><thead><tr><thdata-options="field:'itemid',width:80">商品ID</th><thdata-options="field:'name',width:150">商品名称</th><thdata-options="field:'price',width:80,align:'right'">价格</th><thdata-options="field:'attr',width:200">属性</th><thdata-options="field:'status',width:60">状态</th></tr></thead></table><script>// 定义自定义卡片视图（扩展默认view）varcardview=$.extend({},$.fn.datagrid.defaults.view,{renderRow:function(target,fields,frozen,rowIndex,rowData){varcc=[];cc.push('<td colspan='+fields.length+' style="padding:10px 5px;border:0;">');if(!frozen){// 自定义卡片内容（这里假设有图片字段，或用itemid生成图片）varimg='images/default.jpg';// 默认图片，或根据rowData动态生成if(rowData.itemid){varparts=rowData.itemid.split('-');img='images/product'+parts[1]+'.jpg';// 示例图片路径}cc.push('<div style="float:left;width:150px;height:180px;background:#fafafa;border:1px solid #ccc;padding:10px;text-align:center;">');cc.push('<img src="'+img+'" style="width:140px;height:140px;">');cc.push('<div style="margin-top:10px;font-weight:bold;">'+rowData.name+'</div>');cc.push('</div>');cc.push('<div style="float:left;margin-left:20px;">');for(vari=0;i<fields.length;i++){varfield=fields[i];varcopts=$(target).datagrid('getColumnOption',field);if(field!='itemid'){// 跳过图片字段cc.push('<p><span style="font-weight:bold;">'+copts.title+'：</span> '+(rowData[field]||'')+'</p>');}}cc.push('</div>');cc.push('<div style="clear:both;"></div>');}cc.push('</td>');returncc.join('');}});</script>

效果：每行变成一张精美卡片，左边图片，右边字段标签列表，响应式超好看，分页排序全支持！

方法2：简单列表视图（List View）（适合移动端或简洁展示）
每行垂直显示字段，像手机列表一样。

varlistview=$.extend({},$.fn.datagrid.defaults.view,{renderRow:function(target,fields,frozen,rowIndex,rowData){varcc=[];cc.push('<td colspan='+fields.length+' style="padding:15px;border-bottom:1px solid #eee;">');if(!frozen){cc.push('<div style="font-size:16px;font-weight:bold;margin-bottom:10px;">'+rowData.name+'</div>');cc.push('<div style="line-height:24px;">');for(vari=0;i<fields.length;i++){varfield=fields[i];varcopts=$(target).datagrid('getColumnOption',field);if(field!='name'){cc.push('<span style="color:#666;">'+copts.title+'：</span><span>'+(rowData[field]||'')+'</span> ');}}cc.push('</div>');}cc.push('</td>');returncc.join('');}});// 使用时：view: listview

方法3：结合 detailview 的自定义展开视图（如果想点击展开详情）
先引入官方 detailview.js，然后自定义 detailFormatter。

<scriptsrc="jquery.easyui.min.js"></script><scriptsrc="datagrid-detailview.js"></script><!-- 官方扩展 --><tableid="dg"class="easyui-datagrid"data-options="view:detailview, detailFormatter:myDetailFormatter">...</table><script>functionmyDetailFormatter(index,row){return'<div style="padding:20px;"><h3>'+row.name+' 的详细信息</h3><p>自定义内容：这里可以放表格、图片、表单等...</p></div>';}</script>

你现在直接复制方法1的卡片视图代码到你的页面，刷新一下就能看到超级专业的卡片效果了！
结合之前的复选框 + 分页 + 行内编辑 + 合并单元格，你的 datagrid 已经可以变身现代卡片列表了。

想要我给你一个完整的HTML示例（带远程数据 + 卡片视图 + 图片 + 分页 + 排序）？
或者你告诉我你想实现什么视图（比如“人员名片卡”“订单列表卡”“带操作按钮的卡片”），我2分钟发你完整自定义代码，复制就能跑！

快说说你现在的需求，我手把手帮你搞定，5分钟内看到超级酷的自定义视图效果！