下面介绍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. Asp.net Core WebApi 全局异常类

    通过全局异常类,所有程序中遇到的错误都会被拦截,并友好的返回结果. 1.自定义一个全局异常处理类中间件 using Microsoft.AspNetCore.Http; using Newtonsof ...

  2. 【cocos2d-x 手游研发小技巧（8）通讯的数据压缩与解压 】

    今天说一下手机游戏通讯协议中的数据问题,大量的数据将给服务器端和客户端带来很大的压力,一般来说. 转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2dxJQ-8 ...

  3. c# dataGridview的Cellclick移除事件

    private void gvMoldInfo_CellClick(object sender, DataGridViewCellEventArgs e) { ) return; string col ...

  4. MongoDB 安装记录

    之前使用一直没记录,防再次掉坑,记录下 echo 开始 D: cd D:\Program Files\MongoDB\Server\3.2\bin mongod --install --service ...

  5. Unity 模型导入导出

    从3DMAX导出,参考: http://tieba.baidu.com/p/2807225555 -> 使用3dmax 2013,会自带导出 fbx 的功能 -> 从 3dmax 导出 - ...

  6. ruby -- 进阶学习（九）定制错误跳转404和500

    在开发阶段,如果发生错误时,都会出现错误提示页面,比如:RecordNotFound之类的,虽然这些错误方便开发进行debug,但是等产品上线时,如果还是出现这些页面,对于用户来说是很不友好的. 所以 ...

  7. 受限玻尔兹曼机（RBM）学习笔记（四）对数似然函数

      去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...

  8. IEE数据库kill指定条件的进程

    需求:IEE数据库临时需要添加一个监控,将command为sleep,time>1800,info为null的进程自动杀掉. 1.杀进程脚本ieekill.sh内容如下 #!/bin/bash ...

  9. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

    在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...

  10. SQL Server中的事务日志管理(4/9)：简单恢复模式里的日志管理

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...