下面介绍datagrid的数据网格详细视图和数据网格的分组视图

1、先引用的js和css文件

1）包含eauyui必备的四个文件easyui.css，icon.css, jquery-min.js、jquery-easyui.min.js

和详细视图需要的detailview.js 和 分组视图groupview.js

<link rel="stylesheet" type="text/css" href="js/easyui.css">
<link rel="stylesheet" type="text/css" href="js/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/datagrid-detailview.js"></script>
<script type="text/javascript" src="js/datagrid-groupview.js"></script>

一、创建数据网格详细视图

1) 创建html页面

2)创建数据详细视图

<script>
$(function(){
            //数据网格详细视图事件
            $('#aa').datagrid({
                title:'DataGrid - DetailView',
                width:500,
                height:250,
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                fitColumns:true,
                url:'datagrid_data.json',
                columns:[[
                    {field:'itemid',title:'Item ID',width:80},
                    {field:'productid',title:'Product ID',width:100,sortable:true},
                    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
                    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
                    {field:'attr1',title:'Attribute',width:150,sortable:true},
                    {field:'status',title:'Status',width:60,align:'center'}
                ]],
                view: detailview,
                detailFormatter: function(rowIndex, rowData){
                    return '<table><tr>' +
                            '<td rowspan=2 style="border:0"><img src="data:images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
                            '<td style="border:0">' +
                            '<p>Attribute: ' + rowData.attr1 + '</p>' +
                            '<p>Status: ' + rowData.status + '</p>' +
                            '</td>' +
                            '</tr></table>';
                }
            });

}）;

</script>

3)实现的效果图

二、创建数据网格分组视图

1）创建html页面

<body>

<div align="center">

<p><h2>2、数据网格分组视图</h2></p>
<table id="bb"></table>

</div>

</body>

2)创建数据网格分组事件

<script>

　　$(function(){

　　$('#bb').datagrid({
                title:'DataGrid - GroupView',
                width:500,
                height:250,
                rownumbers:true,
                remoteSort:false,
                nowrap:false,
                fitColumns:true,
                url:'datagrid_data.json',
                columns:[[
                    {field:'productid',title:'Product ID',width:100,sortable:true},
                    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
                    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
                    {field:'attr1',title:'Attribute',width:150,sortable:true},
                    {field:'status',title:'Status',width:60,align:'center'}
                ]],
                groupField:'productid',
                view: groupview,
                groupFormatter:function(value, rows){
                    return value + ' - ' + rows.length + ' Item(s)';
                }
            });

});

</script>

3)分组视图效果图

三、其他数据网格缓存视图和数据网格虚拟滚动视图例子在这个上面都有，参考一下就行了

http://www.jeasyui.net/extension/189.html

easyui数据网格视图（Datagrid View）的简单应用的更多相关文章

  1. 利用EasyUI 数据网格（DataGrid）的loader属性实现后端分页

    该属性在easyui官方文档中并没有详细阐述,通过简单的资料查询和摸索,实现了easyUI数据网格的后端分页功能. 在官网文档中这样阐述loader属性: 定义如何从远程服务器加载数据.返回false ...

  2. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  3. 雷林鹏分享：jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

    jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...

  4. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建子网格

    jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...

  5. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  6. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 雷林鹏分享：jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  9. 雷林鹏分享：jQuery EasyUI 数据网格 - 合并单元格

    jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...

随机推荐

  1. How to set colors of HTML tables

    There is a simple way to set the color of tables: use the bgcolor attribute of tag <table>.   ...

  2. css3 定义选择器

    引言:CSS样式规则有两个主要部分.选择器决定将格式化应用到哪些元素.声明则定义要应用的格式化. 构造选择器 选择器可以定义五个不同的标准来选择要进行格式化的元素. 元素的类型或者名称.如下所示. h ...

  3. 【PRML读书笔记-Chapter1-Introduction】1.4 The Curse of Dimensionality

    维数灾难 给定如下分类问题: 其中x6和x7表示横轴和竖轴(即两个measurements),怎么分? 方法一(simple): 把整个图分成:16个格,当给定一个新的点的时候,就数他所在的格子中,哪 ...

  4. 【转载】[JS]让表单提交返回后保持在原来提交的位置上

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  5. DB2 v9.1 RACF 瞎学笔记

    一.DB2 RACF control module 定义在prefix.SDSNSAMP(DSNXRXAC)中,查找一下数据集 符合*.SDSNSAMP数据集有两个,我这里使用的DB V9,自然pre ...

  6. 浅析Objective-C的copy

    一直对NSObject的copy方法似懂非懂,今天工作做完了,整理一下 深复制和浅复制是什么在这里就不赘述 今天主要分三种类型对copy进行探讨:系统非容器类对象.系统容器类对象和自定义对象 系统非容 ...

  7. MyBatis知多少（15）数据模型

    瘦数据模型是一种最为臭名昭著并且问题多多的对关系数据库系统的滥用.不幸的是,有时又的确需要瘦数据模型.所谓瘦数据模型,就是简单地将每张表都设计为一种通用数据结构,用于存储名值对的集合.这非常像Java ...

  8. win7激活

    应亲戚要求,装了次win7系统,重新删除分区,格盘,重新划分好分区.完毕.发现系统分区全自动变成动态磁盘.使用win7激活工具时,注意选择使用 小马通用版激活工具. 动态磁盘 稍后解释 小马工具

  9. [c++] Collection of key and difficult points

    Operator Overload 1. 在重载下标运算符时(数组符号):不可重载为友元函数,必须是非static类的成员函数. why 2. overload ++ 时,如果是:   int a;  ...

  10. Tools - RSS

    RSS RSS是在线共享和阅读内容的一种方式,能够简洁高效地获取订阅内容的更新. 全称Really Simple Syndication (真正简易联合),也叫聚合内容. 有选择地浏览感兴趣的以及与工 ...