【SSH网上商城项目实战06】基于DataGrid的数据显示-阿里云开发者社区

开发者社区> ghost丶桃子> 正文

【SSH网上商城项目实战06】基于DataGrid的数据显示

简介:
+关注继续查看

目录(?)[+]

        EasyUI中DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

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文件里的数据。如下:

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  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页面:
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  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 'background-color:#fff;';  
  26.                     } else {  
  27.                         return 'background-color:#ff0;';  
  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属性中,如何使用这两个列属性的:

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  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数据。


     (注:到最后我会提供整个项目的源码下载!欢迎大家收藏或关注)

       相关阅读:http://blog.csdn.net/column/details/str2hiberspring.html

_____________________________________________________________________________________________________________________________________________________

-----乐于分享,共同进步!

-----更多文章请看:http://blog.csdn.net/eson_15

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1069 0
Cass环境下光标无显示
先安装CAD2004,十字光标正常显示;再安装CASS7.0,光标就不显示了。现在不清楚是CAD的问题,还是CASS的问题,多半是后者。重新配置了CASS环境也不行。 于是,打开CAD选项,显示,窗口元素,颜色,全部默认,即可。
741 0
如何实现一个循环显示超长图片的控件
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 某次被问到如何实现一个滚筒状的控件,就是可以将一张很长的图片沿着Y轴无限旋转,如下图所示: 大概就是这个意思,当时还不知道图片可以裁剪,想不出整个流程怎么搞,后来得知Bitmap有裁剪功能,才想到这个功能怎么实现,花了一下午时间整了一下有了成果。
839 0
深度学习项目实战——“年龄预测”
学了那么多深度学习的基本知识,还在发愁没有地方展示自己学过的知识?来试试这个简单的实际问题吧!
3666 0
阿里首次披露中台战略:OneData的统一数据标准和实时数据分析是核心
近日,阿里巴巴公共数据平台负责人罗金鹏首次对外披露了在阿里中台战略下,如何推动数据中台落地的个中细节,其中OneData的统一数据标准和实时数据分析是核心。
20156 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载