下面介绍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. wordpress自动截取文章摘要代码

    想要实现 wordpress 首页显示摘要有几种方法: 第一种,可以在写文章的时侯在需要分割的地方加入<!–more–>标签,但在输出首页摘要的同时,也会使feed只显示摘要,不方便读者阅 ...

  2. C#实现IDispose接口

    .net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源.其次,GC也不是实时的,所有GC存在不确定性.为了解决这个问题donet提供了析构函数 public class Te ...

  3. ubuntu-16.04+-xxx-i386.iso ：安装 Oracle 11gR2 数据库

    前言:说实在的,ubuntu 16.04以上很难安装oracle!其间走过了艰难的一段路! 重要附件:ubuntu16.04+-xxx-i386.iso_安装oracle所需的软件包.zip 特点: ...

  4. Promising Linking

    Future/Promise 执行逻辑 scala Future 有几个要点,第一个是 tryAwait 需要借助 CowndownLatch 实现,第二个是可以在 Promise 挂载回调函数 首先 ...

  5. 学习使用:before和:after伪元素

    如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...

  6. 你还在问android横竖屏切换的生命周期？

    本文原创,转载请注明来自xiaoQLuhttp://www.cnblogs.com/xiaoQLu/p/3324503.html 开源帮助android获得了飞速的发展,开源也导致了数不清的碎片问题. ...

  7. 解决clone问题之外的体会

    adlnkoh.sh started at Thu Aug 25 15:42:51 CST 2016 Log file located at /u02/db/testdb/11.1.0/appsuti ...

  8. ping: sendto: Network is unreachable

    在我的板子上ping路由上的IP的时候可以ping通,但是ping外网的IP的时候提示"ping: sendto: Network is unreachable" 后来使用rout ...

  9. IBM X3650 M4服务器安装centos找不到硬盘的解决方法

    IBM X3650 M4是IBM新的2U的服务器,IBM服务器以高稳定性和卓越的性能一直领先其他的服务器品牌成为全球第一.但是我们在用IBM的最新版9.4引导盘引导的时候,里面选项只有windows ...

  10. 扩展 IEnumerable<T>，让它根据另一个集合的顺序来排列

    假如我有两个集合: public class Teacher { public int Id { get; set; } public string Name { get; set; } } publ ...