下面介绍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. 处理链方式执行APD处理

    于在处理链的标准处理类型中没有针对APD的处理类型,所以如果APD处理过程设计好后,需要在处理链中安排计划,每天自动运行,就需要用到特殊的处理方法.步骤如下:     1.在se38中运行程序RSAN ...

  2. System.Net.WebException : The remote server returned an error: (415) UNSUPPORTED MEDIA TYPE

    I am having problems with a bit of code that accesses a restful web service. Running this code, it e ...

  3. 温故而知新：Delegate,Action,Func,匿名方法,匿名委托,事件

    Tks: http://www.cnblogs.com/yjmyzz/archive/2009/11/23/1608818.html 20150801 add: http://www.cnblogs. ...

  4. 十分钟理解Gradle

    一.什么是Gradle 简单的说,Gradle是一个构建工具,它是用来帮助我们构建app的,构建包括编译.打包等过程.我们可以为Gradle指定构建规则,然后它就会根据我们的“命令”自动为我们构建ap ...

  5. spring 集成 Hibernate4.3.X org.hibernate.service.jta.platform.spi.JtaPlatform异常

    使用Spring3.2.4集成Hibernate4.3.5时,出现以下异常 Causedby:java.lang.ClassNotFoundException:org.hibernate.servic ...

  6. android私有文件夹的访问

    首先内部存储路径为/data/data/youPackageName/,下面讲解的各路径都是基于你自己的应用的内部存储路径下. 所有内部存储中保存的文件在用户卸载应用的时候会被删除. 一. files ...

  7. 代码片段：基于 JDK 8 time包的时间工具类 TimeUtil

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “知识的工作者必须成为自己时间的首席执行官.” 前言 这次泥瓦匠带来的是一个好玩的基于 JDK ...

  8. mac word 快捷键

      https://support.office.com/en-us/article/Word-keyboard-shortcuts-c0ca851f-3d58-4ce0-9867-799df7366 ...

  9. Mvc 拼接Html 导出 Excel（服务器不用安装呦！支持2007以上版本）

    新公司,新接触,老方法,更实用. 之前接触过Webform,winfrom 的导出Excel方法 ,优点:省事.缺点:服务器必须安装Office 这几天做项目 和 大牛学习了一下 新的方法,自己加以总 ...

  10. 用户Word写毕业论文时的文献引用方法

    经过网上搜索和自己实践,找到了一种不用第三方工具的文献管理方法 通过将文献定义的成书签的形式,插入到文献中,当文献编号发生变化时,只需进行更新域操作,就可实现文献编号的理新,下面介绍具体方法: 1.首 ...