为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本的DEMO,地址:
http://www.trirand.com/blog/?page_id=5 。我做的算是一个java版本的。为提高用户体验,页面与后台采用ajax交互,全程无刷新。
如果你还不了解Jqgrid网格插件的强大的处,也不了解Jqgrid的基本用法,可以先去
www.javakfz.com看看关于Jqgrid的文章。这篇文章的重点是放在demo上面的,所以不会对网格插件追究太深。
废话不多说了,先上一张全景图。
![](https://i-blog.csdnimg.cn/blog_migrate/10fc33e076050be59c32bd87f1fc8ca8.png)
这是最基本的需求,能够分页显示数据,点击任意列名可以排序,输入学生姓名可以自动提示(类似百度的效果),左下角的五个按钮分别是增删改查功能的实现,我并没有通过这种方式实现,只是显示出来表示有这种功能。比如按年龄排序,效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/e29b7a809ed41b2e0591294ff1aaea33.png)
此时的年龄是按照从小到大的顺序,再次点击列头就是倒序排列。比如班上的学员太多了,你知道他的名字,但是不知道他在第几页。所以要提供一个模糊查询的功能。比如在学生姓名输入框输入“李”,会把姓李的同学显示在下拉列表框中,上下键可以选择,点击选中的学生再按ENTER键就能实现查询功能。效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/3bb31436ad59e588ca2e411c69ed53bc.png)
如果选择了李军同学,点击ENTER键。效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/fcb332379b2f795d5a6eb6cd5f741961.png)
当然如果只输入了“李”字,没有选择具体的学生,那么将把所有姓李的学生全部查询出来。下拉列表的项是姓名+学号拼接而成的,具体实现可以看action中的代码。
二级表头的实现,这种情况主要用于比较。如果要比较学生几个月的成绩变化情况。可以用二级表头实现,在数据表达上也比较直观。效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/3ea16c5e40fea959b69c7d46995024f7.png)
图中基本信息就是二级表头,下面又分了姓名、年龄和性别三个子项。二级表头比较数据变化还是比较方便。
二级表头是列的数据比较,那么假如想要实现行数据比较该怎么办呢?那么可以用到列托动了。选中数据,按住鼠标左键可以任意拖动。比如我们要把上图中的张民生和李军拖到本页的最后两行。拖动后效果:
![](https://i-blog.csdnimg.cn/blog_migrate/d82744f3a0af1cae38bd29be5fe243b2.png)
拖动到具体的位置,就可以直观的比较行数据的变化。但是这个效果刷新页面就不存在了。
数据分组,这种情况就类似于group by语句,比如根据家庭住址来分组。来看看那个地方的人比较多,哪个地方的人比较少。效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/a5b9536c731bea9b079daa34fc0a7565.png)
最近工作比较忙,也没有太多时间给大家发送邮件,直接去我的百度网盘提取吧。地址:
http://pan.baidu.com/share/link?shareid=2574304010&uk=587859240 提取码:x79g 请继续关注
www.javakfz.com 以后将不定期更新原创文章。你的关注将是我最大的动力!