55面试教程网 jQuery EasyUI 技术教程
jQuery EasyUI 技术教程
jQuery EasyUI 教程jQuery EasyUI 简介jQuery EasyUI 应用 – 创建 CRUD 应用jQuery EasyUI 应用 – 创建 CRUD 数据网格jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用jQuery EasyUI 应用 – 创建 RSS Feed 阅读器jQuery EasyUI 拖放 – 基本的拖动和放置jQuery EasyUI 拖放 – 创建拖放的购物车jQuery EasyUI 拖放 – 创建学校课程表jQuery EasyUI 菜单与按钮 – 创建简单的菜单jQuery EasyUI 菜单与按钮 – 创建链接按钮jQuery EasyUI 菜单与按钮 – 创建菜单按钮jQuery EasyUI 菜单与按钮 – 创建分割按钮jQuery EasyUI 布局 – 为网页创建边框布局jQuery EasyUI 布局 – 在面板中创建复杂布局jQuery EasyUI 布局 – 创建折叠面板jQuery EasyUI 布局 – 创建标签页(Tabs)jQuery EasyUI 布局 – 动态添加标签页(Tabs)jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)jQuery EasyUI 布局 – 创建 XP 风格左侧面板jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格jQuery EasyUI 数据网格 – 取得选中行数据jQuery EasyUI 数据网格 – 添加查询功能jQuery EasyUI 数据网格 – 添加工具栏jQuery EasyUI 数据网格 – 创建复杂工具栏jQuery EasyUI 数据网格 – 设置冻结列jQuery EasyUI 数据网格 – 动态改变列jQuery EasyUI 数据网格 – 格式化列jQuery EasyUI 数据网格 – 设置排序jQuery EasyUI 数据网格 – 自定义排序jQuery EasyUI 数据网格 – 创建列组合jQuery EasyUI 数据网格 – 添加复选框jQuery EasyUI 数据网格 – 自定义分页jQuery EasyUI 数据网格 – 启用行内编辑jQuery EasyUI 数据网格 – 扩展编辑器jQuery EasyUI 数据网格 – 列运算jQuery EasyUI 数据网格 – 合并单元格jQuery EasyUI 数据网格 – 创建自定义视图jQuery EasyUI 数据网格 – 创建页脚摘要jQuery EasyUI 数据网格 – 条件设置行背景颜色jQuery EasyUI 数据网格 – 创建属性网格jQuery EasyUI 数据网格 – 扩展行显示细节jQuery EasyUI 数据网格 – 创建子网格jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据jQuery EasyUI 数据网格 – 添加分页组件jQuery EasyUI 窗口 – 自定义窗口工具栏jQuery EasyUI 窗口 – 窗口与布局jQuery EasyUI 窗口 – 创建对话框jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框jQuery EasyUI 树形菜单 – 使用标记创建树形菜单jQuery EasyUI 树形菜单 – 创建异步树形菜单jQuery EasyUI 树形菜单 – 树形菜单添加节点jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单jQuery EasyUI 树形菜单 – 树形菜单拖放控制jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点jQuery EasyUI 树形菜单 – 创建基础树形网格jQuery EasyUI 树形菜单 – 创建复杂树形网格jQuery EasyUI 树形菜单 – 树形网格动态加载jQuery EasyUI 树形菜单 – 树形网格添加分页jQuery EasyUI 树形菜单 – 树形网格惰性加载节点jQuery EasyUI 表单 – 创建异步提交表单jQuery EasyUI 表单 – 表单验证jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)jQuery EasyUI 表单 – 格式化下拉框(ComboBox)jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)jQuery EasyUI 插件jQuery EasyUI 扩展

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

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

在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说,卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图(Card View)。

创建卡片视图(Card View)

从数据网格(datagrid)的默认视图继承,是个创建自定义视图的不错方法。我们将要创建一个卡片视图(Card 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){
                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('');
        }
    });

创建数据网格(DataGrid)

现在我们使用视图创建数据网格(datagrid)。

    <table id="tt" style="width:500px;height:400px"
            title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
            url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">
        <thead>
            <tr>
                <th field="itemid" width="80" sortable="true">Item ID</th>
                <th field="listprice" width="80" sortable="true">List Price</th>
                <th field="unitcost" width="80" sortable="true">Unit Cost</th>
                <th field="attr1" width="150" sortable="true">Attribute</th>
                <th field="status" width="60" sortable="true">Status</th>
            </tr>
        </thead>
    </table>    
    $('#tt').datagrid({
        view: cardview
    });

请注意,我们设置 view 属性,且它的值为我们的卡片视图。

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid16.zip