下面介绍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. Java开发者值得关注的7款新工具

    云计算.大数据地快速发展催生了不少热门的应用及工具.作为老牌语言Java,其生态圈也出来了一些有关云服务.监控.文档分享方面的工具.本文总结了7款较新的Java工具,大家不妨看下. 1. JClari ...

  2. PHP读写文件高并发处理实例-转

    背景: 最近公司游戏开发需要知道游戏加载的流失率.因为,我们做的是网页游戏.玩过网页游戏的人都知道,进入游戏前要加载一些资源.最后才能到达创建角色的游戏界面.我们有一个需求就是要统计在加载过程中还未到 ...

  3. 领域驱动开发推荐代码示例 — Microsoft NLayerApp

    简介: Microsoft NLayerApp是由微软西班牙团队出品的基于.NET 4.0的“面向领域N层分布式架构”代码示例,在codeplex上的地址是:http://microsoftnlaye ...

  4. asp.net中使用ueditor

    原文地址:http://blog.uoolo.com/Article/16 还有在MVC中使用ueditor:http://blog.uoolo.com/Article/111 最初百度了一下“编辑器 ...

  5. windows7 中开启无线热点

    我用的是移动的 CMCC-EDU 上网,但是这个只能在一个设备上登陆,那么问题就来了,当我电脑需要用网,手机也想要用网(不用 2/3/4G)该怎么办? 电脑操作系统:windows7 接下来是开启 w ...

  6. 优化IIS7.5支持10万个同时请求windows 2008 R2

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. -

  7. Ubuntu下的防火墙

    Ubuntu下的防火墙Gufw-ufw Gufw是ufw的桌面版本,网上有Gufw的安装和配置方法,但是我认为并不是很好.网上的教程也有点愚弄大众的嫌疑,因为按照他的说法,最后防火墙根本就无法自动启动 ...

  8. easyui datagrid to excel

    $.extend($.fn.datagrid.methods, { toExcel: function(jq, filename){ return jq.each(function(){ var ur ...

  9. Quiz（贪心，快速幂乘）

    C. Quiz time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  10. c++ 相关的技术资源整理归类

    最近一段时间 c++ 社区里最火热的话题莫过于 cppcon2015 了, isocpp 上一堆相关的新闻,其中有一个页面罗列了该会议的全部主题, 匆匆一瞥几乎眼花缭乱,为期一个星期的会议竟有上百个演 ...