摘要：上一章已经说明了在Jqgrid中如何对数据分组，这一章主要探讨如何格式化Jqgrid中的数据。何谓格式化呢？举个例子，比如对时间格式化处理，去掉后面的时分秒；对数字进行处理，加上千分位分隔符，小数的保留位数，加上前缀或后缀。对超链接或邮箱等等。jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置的。jqGrid中也预定义了常见的格式及其options属性。formatterformatoptionsintegerthousandsSeparator://千分位分隔符, 如”,” defaulValue://默认值curren. 阅读全文

摘要：上一章主要说明了如果实现Jqgrid列数据拖动，这一章主要讨论在Jqgrid中如何实现分组功能。 类似于Sql语句的Group By，Jqgrid提供了属性实现数据分组，这样表现数据会显得比较直观。先上个效果图： 从图上我们可以很直观的看出，数据是根据家庭住址分的组，并且能够很直观的看出每个分组里面有多少信息量。要实现这个功能并不难12345678910111213grouping : true,// 是否分组,默认为falsegroupingView : {groupField : [ 'address' ], // 按照哪一列进行分组groupColumnShow : [ 阅读全文

摘要：上一章提到在Jqgrid中如何设置二级表头，这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能，比如你想把第一行的数据拖到当前页的最后一行，或者其他位置。 Jqgrid表格插件自己没有提供这种功能的，如果要使用这个功能，还需要导入“jquery.tablednd.js”(初始化拖动插件)。如：1 放在Jqgrid的js后面即可。导入js还不算完成，剩下的就剩几句js代码了。 首先，要在Jquery的ready方法里面加入这段代码：123$("#gridTable").tableDnD({scrollAmount : 0}); 然后在Jqgrid的gridComple 阅读全文

摘要：上一章已经说明了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， 先上个图片，当大家看看吧。 其实要实现上面图中的效果也不难... 阅读全文

摘要：为了大家能够更好的学习和使用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上面的，所... 阅读全文