SSH框架网上商城项目第6战之基于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文件里的数据。如下：
{"total":10,"rows":[
{"code":"FI-SW-01","productname":"Koi","price":10.00},
{"code":"K9-DL-01","productname":"Dalmation","price":12.00},
{"code":"RP-SN-01","productname":"Rattlesnake","price":12.00},
{"code":"RP-LI-02","productname":"Iguana","price":12.00},
{"code":"FL-DSH-01","productname":"Manx","price":12.00},
{"code":"FL-DSH-01","productname":"Manx","price":12.00},
{"code":"FL-DLH-02","productname":"Persian","price":12.00},
{"code":"FL-DLH-02","productname":"Persian","price":12.00},
{"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00},
{"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00}
]}
我们可以看到，json数据格式是："key1": value1, "key2":value2。每个value里面又可以是数组，数组中保存新的Jason数据。
有了json文件，我们接下来就可以设计DataGrid控件了，整个DataGrid都是在query.jsp中设计的，因为要显示的内容就是query.jsp中的内容。我们来看看query.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/public/head.jspf" %>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
//请求数据的url地址，后面会改成请求我们自己的url
url:'datagrid_data.json',
loadMsg:'Loading......',
queryParams:{type:''},//参数
//width:300,
fitColumns:true,//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置
//显示斑马线
striped:true,
//当数据多的时候不换行
nowrap:true,
singleSelect:true, //如果为真，只允许单行显示，全显功能失效
//设置分页
pagination:true,
rowStyler: function(index,row){
console.info("index" + index + "," + row)
if(index % 2 == 0) {
return 'background-color:#fff;';
} else {
return 'background-color:#ff0;';
}
},
//同列属性，但是这些列将会冻结在左侧,大小不会改变，当宽度大于250时，会显示滚动条，但是冻结的列不在滚动条内
frozenColumns:[[
{field:'checkbox',checkbox:true},
{field:'code',title:'编号',width:200}
]],
//配置datagrid的列字段
//field：列字段的名称，与json的key捆绑
//title：列标题，是显示给人看的
columns:[[
{field:'productname',title:'类别名称',width:100,
//用来格式化当前列的值，返回的是最终的数据
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";
}
},
{field:'price',title:'价格',width:100,
styler: function(value,row,index){
//设置当前单元格的样式，返回的字符串直接交给 style属性
//console.info("val:" + value + ",row:" + row + ",index:" + index)
if (value < 20){
return 'color:red;';
}
}
}
]]
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</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属性中，如何使用这两个列属性的：
{field:'productname',title:'类别名称',width:100,
//用来格式化当前列的值，返回的是最终的数据
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";//设置为鼠标放上去显示value值
}
},
{field:'price',title:'价格',width:100,
styler: function(value,row,index){
//设置当前单元格的样式，返回的字符串直接交给 style属性
//console.info("val:" + value + ",row:" + row + ",index:" + index)
if (value < 20){ //如果value值小于20
return 'color:red;'; //将value值显示为红色
}
}
}
然后我们再看看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/eson_15/article/details/51322262
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php网上商城购物车设计代码分享
首先,购物车的数据库设计: 1. id 2. goods_id 商品ID 3. session_id 购物车ID 4. goods_sn 商品编码 5. goods_name 商品名称 6. shop_price 商品商城售价 7. goods_price 商品真实售价(与shop_price的区别在于,当打折的时候,shop_price是打折之前商品的售价,而goods_price是打折之后的) 8. goods_number 数量 9. weight 商品重量 10. goods_attr
-
SSH框架的常见问题和解决方法
Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Sesssion 4.创建事务Transation 5.持久化操作 6.提交事务 7.关闭Session 8.关闭SesstionFactory 为什么要用: 1. 对JDBC访问数据库的代码做了封装,大大简化了数据访问层繁琐的重复性代码. 2. Hibernate是一个基于JDBC的主流持久化框架,是一个优秀的ORM实现.他很大程度的简化DAO层的编码工作
-
SSH框架网上商城项目第29战之使用JsChart技术显示商品销售报表
这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇文章详细的介绍了一下注册的表单验证,可以直接把功能加到本项目中,修改一下相关的跳转即可,就不再做了.另外,目前这个项目只有action层和service层,dao层我还没抽取,做完这个报表,我把dao层抽取一下,再对整个项目做个总结,差不多就可以上传源码了,到时候欢迎大家下载~ 这一节主要做一下最后一个功能:使用JsChart这个工具来显示商品的销售报表,JsChart是很好用的一款制作报表的工具,之所以好用,是因为它的官方实例做
-
SSH+Jquery+Ajax框架整合
近期学习了SSH2(Struts2+Spring+Hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证). 于是,我开始在网上搜索解决的办法,有些说通过一个隐藏的iframe来达到效果,当我总觉得麻烦和不实用.后来问了下老师,告诉了我使用ajax可以达到想要的效果,我又发现网上有很多例子都是ajax的,但缺少的就是SSH2(整合好的)和ajax 的整合(ajax使用了jQuery框
-
java网上商城开发之邮件发送功能（全）
最近在学习网上商城时,接触到了一个邮件发送的功能.之前一直在使用邮箱进行发送邮件,但是其中的具体如何运转的却不知道是怎么回事.那么邮件发送究竟是怎么一回事呢? 邮件发送过程: 过程描述:首先是发送人将邮件通过客户端软件发送到特定的服务器上,然后通过电子邮件简单传输协议(SMTP)来进行传输,收件人通过POP3协议将邮件从服务器上接受回来.这样就实现了邮件之间的相互传送. 实现过程: 在有网络的情况下,我们可以直接使用搜狐.网易等邮箱进行发送.那么如何在没有网络的情况下,实现内部之间的发送呢? 首
-
SSH网上商城之使用ajax完成用户名是否存在异步校验
小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她就自动提示用户名已经存在,我们也不需要浪费那么多感情,直到填写完那么多的信息之后在提示,在小编最近的项目中,就碰到这个问题,我们可以使用ajax完成用户名是否存在,今天这篇博客,小编就简单的总结一下,如何使用ajax来完成校验,还请小伙伴多多指教哦`(*∩_∩*)′! 首先ajax完成用户名是否存在
-
SSH框架网上商城项目第25战之使用java email给用户发送邮件
当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息,邮箱地址是从用户的基本信息中获取,好了,首先我们来看一下java中发送邮件的方法. 1. java中发送email的方法 在完善这个项目之前,先来回顾一下java中是如何发送邮件的,首先肯定需要发送邮件的jar包:mail.jar,导入到lib目录下,好了,下面我们先写一个普通的java程序来回顾一下java email的知识点: public class SendEmailDemo { public static vo
-
JSChart轻量级图形报表工具(内置函数中文参考)
因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色. colorizePie(ar
-
php 网上商城促销设计实例代码
大体的思想,每一个促销要新建一个促销类,有专门的开关来控制是否生效. 用商品里面的促销识别码来判断具体调用哪一个促销实例. 首先,在添加商品的时候,分两步,第一步是添加状态,第二步是把购物车内的商品显示这个状态. 一,添加步骤几个重要的点: 1,添加商品之前,遍历所有的促销互斥条件. 例如,某一款商品不可以和另一个商品同时在一个购物车内:或者某个用户权限,不可以购买特定的一件商品等等. 2,添加商品之前,选择特定的促销实例,来进行添加之前的操作. 注:第二点与第一点的区别在于1是要遍历所有的促销
-
SSH框架网上商城项目第12战之添加和更新商品功能
添加商品部分原理和添加商品类别是一样的,参考文章:添加和更新商品类别,不过要比商品类别复杂,因为商品的属性有很多,对应的数据库中的字段也就多了,添加商品还有个选项是上传图片,这一小块内容会在下一篇文章中单独说明,因为这涉及到一个知识点,就是Struts2实现文件上传功能.其他废话不多说了,现在开始完善添加商品部分的代码: 1. 添加商品 1.1 添加商品的UI实现 首先完成query.jsp中添加商品部分的代码: 接下来我们看save.jsp中的具体实现: <%@ page language=&qu