Jqgrid demo-史上强大，没有之一
添加时间:2013-6-25 点击量:
为了大师可以或许更好的进修和应用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://www.javakfz.com/index.php/06/24/393.html。
我们永远不要期待别人的拯救，只有自己才能升华自己。自己已准备好了多少容量，方能吸引对等的人与我们相遇，否则再美好的人出现、再动人的事情降临身边，我们也没有能量去理解与珍惜，终将擦肩而过。—— 姚谦《品味》
为了大师可以或许更好的进修和应用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://www.javakfz.com/index.php/06/24/393.html。
