转自：https://blog.csdn.net/eson_15/article/details/51322262

1. 回顾一下第4节内容

在第4节中，我们使用EasyUI搭建好了左侧菜单栏，并且通过点击菜单选项在右边弹出对应的选项卡。这节我们来使用DataGrid把右边的选项卡部分做好。先看一下第4节中最后的aindex.jsp文件（也可参见第4节中的内容）：

2. 创建DataGrid控件的几种方式

DataGrid显示数据是json格式的，所以我们首先要把从后台获取到的数据打包成Jason格式，然后传到前台来让DataGrid来显示，这一节我们先不从后台获取数据，先自己准备一个.json文件，里面有ison格式的数据，然后我们来让DataGird显示，先把显示功能做好，再请求后台数据。

我们先从EasyUI的参考文档中看一下DataGrid显示的格式是什么样的，如下图所示：

我们沿着参考文档往下看，我们发现DataGrid空间是通过<table>来创建的，有三种创建方式：

第一种：从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

第二种：通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

第三种：使用Javascript去创建DataGrid控件。

我们采取第三种，用js去创建DataGrid控件，首先我们得先准备一个存储了json格式数据的文件，在WebRoot/jquery-easyui-1.3.5/demo/datagrid/下面有几个json文件，我们选择一个datagrid_data1.json，拷贝到WebRoot目录下，修改一下参数，等会我们要来显示这个json文件里的数据。如下：

  1.  
    {"total":10,"rows":[
  2.  
    {"code":"FI-SW-01","productname":"Koi","price":10.00},
  3.  
    {"code":"K9-DL-01","productname":"Dalmation","price":12.00},
  4.  
    {"code":"RP-SN-01","productname":"Rattlesnake","price":12.00},
  5.  
    {"code":"RP-LI-02","productname":"Iguana","price":12.00},
  6.  
    {"code":"FL-DSH-01","productname":"Manx","price":12.00},
  7.  
    {"code":"FL-DSH-01","productname":"Manx","price":12.00},
  8.  
    {"code":"FL-DLH-02","productname":"Persian","price":12.00},
  9.  
    {"code":"FL-DLH-02","productname":"Persian","price":12.00},
  10.  
    {"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00},
  11.  
    {"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00}
  12.  
    ]}

我们可以看到，json数据格式是："key1": value1, "key2":value2。每个value里面又可以是数组，数组中保存新的Jason数据。
        有了json文件，我们接下来就可以设计DataGrid控件了，整个DataGrid都是在query.jsp中设计的，因为要显示的内容就是query.jsp中的内容。我们来看看query.jsp页面：

  1.  
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.  
    <html>
  4.  
    <head>
  5.  
    <%@ include file="/public/head.jspf" %>
  6.  
    <script type="text/javascript">
  7.  
    $(function(){
  8.  
    $('#dg').datagrid({
  9.  
    //请求数据的url地址，后面会改成请求我们自己的url
  10.  
    url:'datagrid_data.json',
  11.  
    loadMsg:'Loading......',
  12.  
    queryParams:{type:''},//参数
  13.  
    //width:300,
  14.  
    fitColumns:true,//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置
  15.  
    //显示斑马线
  16.  
    striped:true,
  17.  
    //当数据多的时候不换行
  18.  
    nowrap:true,
  19.  
    singleSelect:true, //如果为真，只允许单行显示，全显功能失效
  20.  
    //设置分页
  21.  
    pagination:true,
  22.  
    rowStyler: function(index,row){
  23.  
    console.info("index" + index + "," + row)
  24.  
    if(index % 2 == 0) {
  25.  
    return '';
  26.  
    } else {
  27.  
    return '';
  28.  
    }
  29.  
     
  30.  
    },
  31.  
    //同列属性，但是这些列将会冻结在左侧,大小不会改变，当宽度大于250时，会显示滚动条，但是冻结的列不在滚动条内
  32.  
    frozenColumns:[[
  33.  
    {field:'checkbox',checkbox:true},
  34.  
    {field:'code',title:'编号',width:200}
  35.  
    ]],
  36.  
    //配置datagrid的列字段
  37.  
    //field：列字段的名称，与json的key捆绑
  38.  
    //title：列标题，是显示给人看的
  39.  
    columns:[[
  40.  
    {field:'productname',title:'类别名称',width:100,
  41.  
    //用来格式化当前列的值，返回的是最终的数据
  42.  
    formatter: function(value,row,index){
  43.  
    return "<span title=" +　value + ">" + value + "</span>";
  44.  
    }
  45.  
    },
  46.  
    {field:'price',title:'价格',width:100,
  47.  
    styler: function(value,row,index){
  48.  
    //设置当前单元格的样式，返回的字符串直接交给 style属性
  49.  
    //console.info("val:" + value + ",row:" + row + ",index:" + index)
  50.  
    if (value < 20){
  51.  
    return 'color:red;';
  52.  
    }
  53.  
    }
  54.  
    }
  55.  
    ]]
  56.  
    });
  57.  
    });
  58.  
    </script>
  59.  
    </head>
  60.  
     
  61.  
    <body>
  62.  
    <table id="dg"></table>
  63.  
    </body>
  64.  
    </html>

3. DataGrid控件的属性

我们可以看到，使用js去创建DataGrid控件的话，只要一个<table>标签即可，主要都是在js中完成。DataGrid的控件很强大，这里我们主要做一下基本的显示，更多其他的功能可以参照EasyUI的开发文档。我们现在针对上面的query.jsp文件做一下分析：

首先DataGrid控件有两种属性：一个是DataGrid属性，还有一个是列属性。顾名思义，DataGrid属性是给整个DataGrid控件添加的属性，而列属性是针对某一列的。每中属性有很多，这里只做了一些基本的常用的属性。

DataGrid属性里最重要的是columns属性，它是一个数组，可以创建多列，见下面的截图：

我们来看下columns属性中有哪些细节：

列属性中，field表示字段名称，对应与json数据的key，然后title是要显示给用户看的标题，见query.jsp文件中，还有其他一些基本属性可以参照EasyUI文档。列属性中比较重要的也比较常用的两个属性是formatter和styler，分别是用来格式化当前列的值和设置单元格样式的，我们主要来看一下这两个属性：

我们具体来分析一下上面query.jsp中的columns属性中，如何使用这两个列属性的：

  1.  
    {field:'productname',title:'类别名称',width:100,
  2.  
    //用来格式化当前列的值，返回的是最终的数据
  3.  
    formatter: function(value,row,index){
  4.  
    return "<span title=" +　value + ">" + value + "</span>";//设置为鼠标放上去显示value值
  5.  
    }
  6.  
    },
  7.  
    {field:'price',title:'价格',width:100,
  8.  
    styler: function(value,row,index){
  9.  
    //设置当前单元格的样式，返回的字符串直接交给 style属性
  10.  
    //console.info("val:" + value + ",row:" + row + ",index:" + index)
  11.  
    if (value < 20){ //如果value值小于20
  12.  
    return 'color:red;'; //将value值显示为红色
  13.  
    }
  14.  
    }
  15.  
    }
 

然后我们再看看DataGrid控件的一些属性：

url表示要显示的数据来源，这里设置成datagrid_data.json表示数据来源是这个json文件，放在WebRoot目录下了；

loadMsg表示加载数据过程中显示的信息；

queryParams表示传给后台的参数，在这里用不到，因为我们目前还没有和后台关联上，只是显示一个json文件，后面会用到；

fitColums设置为true后表示水平自动展开，自适应网格的宽度，如此设置，水平方向就不会有滚动条了，也不用设置宽度了；

width是宽度，如果数据过长显示不下，水平方向就会出现滚动条；

striped设置为true后表示显示斑马线，这是一个显示样式，试一下便知；

nowrap设置为true后表示当数据多的时候不换行，否则某一行数据多的时候会换行，会比较难看；

pagination设置为true后表示开启分页功能；

singleSelect设置为true时，只允许勾选单行，全选功能失效，主要用于最前面一列的复选框；

frozenColums是为了设置冻结列，在frozenColums中设置的列，不会改变大小。里面如果设置了{field:'checkbox',checkbox:true},表示这是个复选框列，给用户勾选用的，如果设置了上面的singleSelect，那么只能选择一项，不能全选；

rowStyler是设置所有行的样式的，两个参数为行索引和行，上面设置的是偶数行是白色，奇数行是黄色。

等等……还有其他DataGrid控件的属性，可以参考EasyUI的技术文档，在这里就不一一解说了。

4. DataGrid数据显示的效果

好了，完成了query.jsp后，我们重启tomcat，然后进入到后台，点击左侧菜单栏的类别管理，就会在右边出现一个类别管理的选项卡，然后就会显示我们指定的json数据，这个Jason数据是我们自己放在WebRoot目录下的，后面我们将会把json和struts整合，动态的获取从后台传过来的json数据。

【SSH网上商城项目实战06】基于DataGrid的数据显示的更多相关文章

  1. 【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示

    转自:https://blog.csdn.net/eson_15/article/details/51405911 网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要 ...

  2. 【SSH网上商城项目实战27】域名空间的申请和项目的部署及发布

     转自:https://blog.csdn.net/wwww_com/article/details/54405355 前面陆陆续续的完成了网上商城的一些基本功能,虽然还有很多地方有待完善,但是不影响 ...

  3. 【SSH网上商城项目实战21】从Demo中看易宝支付的流程

         转自: https://blog.csdn.net/eson_15/article/details/51447492 这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后, ...

  4. 【SSH网上商城项目实战30】项目总结

      转自:https://blog.csdn.net/eson_15/article/details/51479994 0. 写在前面 项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了 ...

  5. 【SSH网上商城项目实战30】项目总结（附源码下载地址）

    项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了,积少成多,写博客的过程是固化思路的一个过程,对自己很有用,同时也能帮助别人.顺便说个题外话,在学习的过程中肯定会遇到很多异常出现,我们 ...

  6. 【SSH网上商城项目实战01】整合Struts2、Hibernate4.3和Spring4.2

    转自:https://blog.csdn.net/eson_15/article/details/51277324 今天开始做一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总 ...

  7. 【SSH网上商城项目实战25】使用java email给用户发送邮件

       转自: https://blog.csdn.net/eson_15/article/details/51475046 当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息, ...

  8. 【SSH网上商城项目实战15】线程、定时器同步首页数据（类似于博客定期更新排名）

    转自:https://blog.csdn.net/eson_15/article/details/51387378 上一节我们做完了首页UI界面,但是有个问题:如果我在后台添加了一个商品,那么我必须重 ...

  9. 【SSH网上商城项目实战20】在线支付平台的介绍

    转自:https://blog.csdn.net/eson_15/article/details/51441431 之前已经完成了首页的显示,用户添加购物车,确认订单等功能,下面就是支付功能的开发了. ...

随机推荐

  1. UDP的优点

    UDP优点 关于何时.发送什么数据的应用层控制更为精细 只需要应用层把数据传给UDP,UDP就把数据打包到网络层.对于TCP来说,存在一个拥塞控制机制,当链路变得拥塞时,会抑制TCP发送方,并造成数据 ...

  2. 【性能测试】jmeter的坑(1)——如何在多网卡情况下正确连接

    问题现象: 性能测试时,使用的服务器配置了双网卡,windows客户机配置了四网卡,坑爹的配置,内外网的隔离,导致在使用jmeter进行分布式测试的时候总是连接失败. 原因分析: Jmeter采用了r ...

  3. Chrome控制台打印输出彩色调试信息

    我们都知道Chrome浏览器在控制台可以通过console.log("Hello");输出调试信息.但是每次打印的内容是黑白的难免有些单调,今天偶然的发现某网站居然能够打印彩色调试 ...

  4. 多事实表 SQL实现和SSAS中MDX实现的差异

    如图,资产负债视图是事实表,损益表也是事实表.都包含年.月.组织.账簿信息. SQL如何实现呢? 简单粗暴,事实事实表串事实表,Full Join select 损益视图.年 ,损益视图.年月 ,损益 ...

  5. centos6.5安装docker（亲测）

    centos6.5下安装docker的过程办法 在看了网上N多复制粘贴的文章,又尝试无效后,我把我最终成功的办法发出来,希望能帮到拼命干环境的你. 操作环境: centos6.5(Final) 内核: ...

  6. postman小结

    1.get和post请求,get有限制2k,post没有限制post安全 在选择的时候别把get post选错然后,run 2.data 选成txt文件  utf-8 ip ip,result12.1 ...

  7. CentOS 7 安装RocketMQ遇到的问题汇总

    1.运行broker时提示内存无法分配 解决办法:http://www.bubuko.com/infodetail-2088958.html

  8. 【实战】Tomcat管理后台Getshell

    一.制作war包 1.xiaoma.jsp压缩成xiaoma.zip格式,然后修改为xiaoma.war 2.修仙之百度大法 二.部署war包(选择文件,上传即可,不啰嗦啦) 三.C刀连接:http: ...

  9. Jenkins 源代码编译

    最近一直想写一个关于 Jenkins 管理的 InelliJ 插件,但是尝试很多次总是在登录认证上面失败,各种办法都不起作用,而且官方的文档含糊不清,就动起了从源代码编译在开发环境中进行调试. 废话少 ...

  10. ContentProvider和Cursor以及CursorAdapter三者之间内部链接实现原理 解析

    最近 在学习Android3.0中推出的 Loader 机制,其中CursorLoader 这个加载器说是可以实时监测数据和更新数据,为了一探究竟,就连带的将 ContentProvider和Curs ...