摘要：
上一章已经说明了Jqgrid结合Struts2+json展示数据，这一章主要探讨Jqgrid如何设置二级表头，类似这样的效果。如： 要实现这个功能，其实也不难。通过Jqgrid的setGroupHeaders方法就OK了。具体的参数我就不多说明了，详细的属性可以去官网看看。实现代码如下：12345678$("#gridTable").jqGrid('setGroupHeaders', {useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并groupHeaders : [ {startColumnName : 阅读全文
摘要：
DEMO用的是ssh框架实现的，具体怎么搭建的就不多做说明了。分页表格的数据操作难点就是数据展现。至于增删改直接用hibernate原生的方法实现即可。 初步分析：表格要实现分页，那么一页显示多少条数(PageSize)和当前页码(CurrentPage)这两个条件必不可少。为了实现点击任何一列的表头进行排序，那么排序的列名(Sidx)和排序规则(Sort)必不可少。有了这四个参数实现基本的数据展现应该不成问题了。但是如果数据量比较多的时候，为了方便查询。还得需要一个Map参数，用来保存页面的请求参数。比如根据编号查询，根据名称查询等。 废话不多说，先看Dao接口定义。1234567891.. 阅读全文
摘要：
Pager Bar位于表格最下边。默认情况下，分为三部分。如图：第一部分：导航按钮栏(Navigator)第二部分：页码栏(Pager)第三部分：记录信息栏(Record) 要实现这个功能也不难，最基本的语法就一句。1$("#gridTable").jqGrid('navGrid', '#gridPager'); 但是很多时候我们需要的不仅仅是这种，还有很多属性需要了解。1. Navigator默认有5个预定义好的按钮：添加新行编辑选中的行删除选中的行查找记录重载表格Navigator通过navGrid方法来配置导航栏，用法是：$(“#gri 阅读全文
摘要：
Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。这三种方式分别是：Cell Editing——只允许修改某一个单元格内容Inline Editing——允许在jqGrid中直接修改某一行的数据Form Editing——弹出一个新的编辑窗口进行编辑和新增 在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。 相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的块。在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据的界面。这个用到了jquery ui的dialog... 阅读全文
摘要：
上一篇中，Jqgrid已经可以从服务端获得数据，并显示在Grid表格中了。下面说一下，如何操作表格及其数据。 jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式： $(“#grid_id”).jqGridMethod( parameter1,…,parameterN );或者$(“#grid_id”).jqGrid(‘method’, parameter1,…,parameterN ); 首先介绍一下Jqgrid的几个最常用的方法函数，具体的方法API也可以参考文档（http://www.trirand.com/jqgridwiki/doku.p 阅读全文
摘要：
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下:完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。自定义的工具列。预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。完整的分页功能。按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。预设的action formatter，可以快速而直觉地对每笔资料做运算。支持多种数据格式。比如json、xml、array等。 这是我自己做的DEMO， 先上个图片，当大家看看吧。 其实要实现上面图中的效果也不难... 阅读全文
摘要：
前面一章已经对datepicker的使用，做了简单的说明。这一章主要对dialog如何使用做个说明。 jquery ui-dialog在web开发中运用还是比较多的。最常见的例子就是登录功能的实现。运用dialog的好处就是不用刷新网页，直接弹出一个div层，让用户输入信息。使用起来也比较方便。下面就学学如何使用它吧。 前提条件导入jquery-1.7.2.js ，也可以是其它版本。 导入jquery-ui.js，也可以直接指向http://code.jquery.com/ui/1.10.2/jquery-ui.js 这个地址。前提是要有网络。 导入jquery-ui.css，样式表也可以自. 阅读全文
摘要：
在web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，让用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。 我们也可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件： datepicker ，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。 datepicker 插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择. 阅读全文
摘要：
为了大家能够更好的学习和使用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上面的，所... 阅读全文