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

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

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

<table id="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>
            <th data-options="field:'itemid',width:80">商品ID</th>
            <th data-options="field:'name',width:150">商品名称</th>
            <th data-options="field:'price',width:80,align:'right'">价格</th>
            <th data-options="field:'attr',width:200">属性</th>
            <th data-options="field:'status',width:60">状态</th>
        </tr>
    </thead>
</table>

<script>
// 定义自定义卡片视图（扩展默认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;">');
        if (!frozen){
            // 自定义卡片内容（这里假设有图片字段，或用itemid生成图片）
            var img = 'images/default.jpg';  // 默认图片，或根据rowData动态生成
            if(rowData.itemid){
                var parts = 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(var i=0; i<fields.length; i++){
                var field = fields[i];
                var copts = $(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>');
        return cc.join('');
    }
});
</script>

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

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

var listview = $.extend({}, $.fn.datagrid.defaults.view, {
    renderRow: function(target, fields, frozen, rowIndex, rowData){
        var cc = [];
        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(var i=0; i<fields.length; i++){
                var field = fields[i];
                var copts = $(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>');
        return cc.join('');
    }
});

// 使用时：view: listview

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

<script src="jquery.easyui.min.js"></script>
<script src="datagrid-detailview.js"></script>  <!-- 官方扩展 -->

<table id="dg" class="easyui-datagrid" data-options="view:detailview, detailFormatter:myDetailFormatter">...</table>

<script>
function myDetailFormatter(index, row){
    return '<div style="padding:20px;"><h3>' + row.name + ' 的详细信息</h3><p>自定义内容：这里可以放表格、图片、表单等...</p></div>';
}
</script>

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

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

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