Jqgrid demo-史上最强大，没有之一

        为了大家能够更好的学习和使用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上面的，所以不会对网格插件追究太深。

        废话不多说了，先上一张全景图。

        这是最基本的需求，能够分页显示数据，点击任意列名可以排序，输入学生姓名可以自动提示(类似百度的效果)，左下角的五个按钮分别是增删改查功能的实现，我并没有通过这种方式实现，只是显示出来表示有这种功能。比如按年龄排序，效果图：

 

        此时的年龄是按照从小到大的顺序，再次点击列头就是倒序排列。比如班上的学员太多了，你知道他的名字，但是不知道他在第几页。所以要提供一个模糊查询的功能。比如在学生姓名输入框输入“李”，会把姓李的同学显示在下拉列表框中，上下键可以选择，点击选中的学生再按ENTER键就能实现查询功能。效果图：

 

    

        如果选择了李军同学，点击ENTER键。效果图：

 

        当然如果只输入了“李”字，没有选择具体的学生，那么将把所有姓李的学生全部查询出来。下拉列表的项是姓名+学号拼接而成的，具体实现可以看action中的代码。

        二级表头的实现，这种情况主要用于比较。如果要比较学生几个月的成绩变化情况。可以用二级表头实现，在数据表达上也比较直观。效果图：

        图中基本信息就是二级表头，下面又分了姓名、年龄和性别三个子项。二级表头比较数据变化还是比较方便。

        二级表头是列的数据比较，那么假如想要实现行数据比较该怎么办呢？那么可以用到列托动了。选中数据，按住鼠标左键可以任意拖动。比如我们要把上图中的张民生和李军拖到本页的最后两行。拖动后效果：

 

        拖动到具体的位置，就可以直观的比较行数据的变化。但是这个效果刷新页面就不存在了。

        数据分组，这种情况就类似于group by语句，比如根据家庭住址来分组。来看看那个地方的人比较多，哪个地方的人比较少。效果图：

 

　　最近工作比较忙，也没有太多时间给大家发送邮件，直接去我的百度网盘提取吧。地址：http://pan.baidu.com/share/link?shareid=2574304010&uk=587859240 提取码：x79g 请继续关注www.javakfz.com 以后将不定期更新原创文章。你的关注将是我最大的动力！