jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单。使用的方式有两种:
- 使用普通的subGrid子表格;
- 使用一个完整jqGrid作为子表格;
显然第二种方式更加通用,功能更加强大,因此我主要使用第二种方式。至于第一种方式,可以具体参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid )。
使用完整jqGrid作为子表格
使用子表格,涉及到jqGrid的三个选项:
-
subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false;当此项设为true的时候,Grid表格的最左边将会添加一列,里面有一个“+”图标,用于展开子格;
-
subGridRowExpanded :当点击“+”展开子表格时,将触发此选项定义的事件方法;
-
subGridRowColapsed :当点击“-”收起子表格时,将触发此选项定义的事件方法;
注1 :subGridRowExpanded定义的事件方法函数将会得到两个参数:
-
subgrid_id :子表格的id;当子表格展开的时候,在主表格中会创建一个div元素用来容纳子表格,subgrid_id就是这个div的id。
-
row_id :主表格中所要展开子表格的行的id。
注2 :在subGridRowExpanded定义的事件方法函数中,即可根据以上两个参数,创建新的jqGrid对象,其中的options选项可参考主表格的jqGrid选项来运用。可以理解为在主表格中在嵌套一个新的jqGrid对象。当然,在subGridRowExpanded定义的事件函数中,也不一定非得嵌套一个新的jqGrid到主表格,可以将其放置于任何自己希望的位置,甚至做些别的操作,根本不去里理会子表格,比如使用$.ajax()向Server发送ajax请求,并根据返回的json,做些自定义的操作。
注3 :应当注意subGridRowColapsed的拼写并太符合规范,但却不得不遵循这个拼写。哈哈~
注4 :相对于subGridRowExpanded必须定义事件函数来完成操作,subGridRowColapsed不用刻意定义对应的事件函数;因为当行收起的时候,上面提到的那个动态创建用来容纳子表格的div,其里面的内容将会被自动移除(removed)。
现在来看看代码中到底多了哪些内容。
FetchPatentCasesAction代码:
- packagecn.gengv.struts2ex.jqGrid;
-
importjava.util.List;
-
importcom.byzl.hare.dao.impl.Criterion;
-
importcom.byzl.hare.model.Contact;
-
importcom.byzl.hare.model.PatentCase;
-
importcom.byzl.hare.service.ContactService;
-
@SuppressWarnings("serial")
-
publicclassFetchPatentCasesActionextendsJqGridBaseAction<PatentCase>{
-
privateContactServicecontactService;
-
privateContactcontact;
-
@Override
-
publicStringexecute(){
-
returnthis.refreshGridModel();
- }
-
@Override
-
publicintgetResultSize(){
-
returnthis.contactService.queryPatentCasesCount(contact);
- }
-
@Override
-
publicintgetResultSize(List<Criterion>criteria){
-
returnthis.contactService.queryPatentCasesCount(contact);
- }
-
@Override
-
publicList<PatentCase>listResults(intfrom,intlength){
-
returnthis.contactService.queryPatentCases(contact,from,length);
- }
-
@Override
-
publicList<PatentCase>listResults(List<Criterion>criteria,intfrom,
-
intlength){
-
returnthis.contactService.queryPatentCases(contact,from,length);
- }
-
@Override
-
publicvoidsortResults(List<PatentCase>results,Stringfield,Stringorder){
-
- }
-
publicvoidsetContactService(ContactServicecontactService){
-
this.contactService=contactService;
- }
-
publicContactgetContact(){
-
returncontact;
- }
-
publicvoidsetContact(Contactcontact){
-
this.contact=contact;
- }
- }
Action设置:
- <actionname="fetchPatentCases"class="cn.gengv.struts2ex.jqGrid.FetchPatentCasesAction">
-
<resultname="success"type="json">
-
<paramname="includeProperties">
- gridModel/[/d+/]/./w+,
- rows,page,total,record
-
</param>
-
<paramname="noCache">true</param>
-
<paramname="ignoreHierarchy">false</param>
-
</result>
-
</action>
javascript代码:
- $(function(){
-
-
$("#gridTable").jqGrid({
-
url:"jqGrid05.action",
-
datatype:"json",
-
mtype:"GET",
- height:350,
- width:600,
- colModel:[
-
{name:"id",index:"id",label:"编码",width:40},
-
{name:"lastName",index:"lastName",label:"姓",width:80},
-
{name:"firstName",index:"firstName",label:"名",width:80},
-
{name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},
-
{name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}
- ],
-
viewrecords:true,
- rowNum:15,
- rowList:[15,50,100],
-
prmNames:{search:"search"},
- jsonReader:{
-
root:"gridModel",
-
records:"record",
-
repeatitems:false,
- },
-
pager:"#gridPager",
-
caption:"联系人列表",
-
hidegrid:false,
-
shrikToFit:true,
-
subGrid:true,
-
subGridRowExpanded:function(subgrid_id,row_id){
-
varsubgrid_table_id;
-
subgrid_table_id=subgrid_id+"_t";
-
varsubgrid_pager_id;
-
subgrid_pager_id=subgrid_id+"_pgr"
-
-
$("#"+subgrid_id).html("<tableid='"+subgrid_table_id+"'class='scroll'></table><divid='"+subgrid_pager_id+"'class='scroll'></div>");
-
-
$("#"+subgrid_table_id).jqGrid({
-
url:"fetchPatentCases.action?contact.id="+row_id,
-
datatype:"json",
-
colNames:['编号','内部编码','名称','申请号'],
- colModel:[
-
{name:"id",index:"id",width:80,key:true},
-
{name:"internalNo",index:"internalNo",width:130},
-
{name:"name",index:"name",width:80,align:"right"},
-
{name:"applicationNo",index:"applicationNo",width:80,align:"right"}
- ],
-
jsonReader:{
-
root:"gridModel",
-
records:"record",
-
repeatitems:false
- },
-
prmNames:{search:"search"},
- pager:subgrid_pager_id,
-
viewrecords:true,
-
height:"100%",
- rowNum:5
- });
- }
- });
- });
说明:
- 由于FetchPatentCasesAction继承自JqGridBaseAction<PatentCase>,因此可以像之前的例子那样,使用这个Action类来应对jqGrid子表格的请求。
- FetchPatentCasesAction的Action设置也可以仿照其他针对jqGrid的Action来设置。
- 对于子表格Grid来说,和主表格Grid并没有什么分别,主表格中可以用的选项,在子表格中也可以使用。因此需要设置jsonReader等选项来配合FetchPatentCasesAction中的成员变量。
OK,就这么简单,子表格功能完成了。
jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单。使用的方式有两种:
- 使用普通的subGrid子表格;
- 使用一个完整jqGrid作为子表格;
显然第二种方式更加通用,功能更加强大,因此我主要使用第二种方式。至于第一种方式,可以具体参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid )。
使用完整jqGrid作为子表格
使用子表格,涉及到jqGrid的三个选项:
-
subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false;当此项设为true的时候,Grid表格的最左边将会添加一列,里面有一个“+”图标,用于展开子格;
-
subGridRowExpanded :当点击“+”展开子表格时,将触发此选项定义的事件方法;
-
subGridRowColapsed :当点击“-”收起子表格时,将触发此选项定义的事件方法;
注1 :subGridRowExpanded定义的事件方法函数将会得到两个参数:
-
subgrid_id :子表格的id;当子表格展开的时候,在主表格中会创建一个div元素用来容纳子表格,subgrid_id就是这个div的id。
-
row_id :主表格中所要展开子表格的行的id。
注2 :在subGridRowExpanded定义的事件方法函数中,即可根据以上两个参数,创建新的jqGrid对象,其中的options选项可参考主表格的jqGrid选项来运用。可以理解为在主表格中在嵌套一个新的jqGrid对象。当然,在subGridRowExpanded定义的事件函数中,也不一定非得嵌套一个新的jqGrid到主表格,可以将其放置于任何自己希望的位置,甚至做些别的操作,根本不去里理会子表格,比如使用$.ajax()向Server发送ajax请求,并根据返回的json,做些自定义的操作。
注3 :应当注意subGridRowColapsed的拼写并太符合规范,但却不得不遵循这个拼写。哈哈~
注4 :相对于subGridRowExpanded必须定义事件函数来完成操作,subGridRowColapsed不用刻意定义对应的事件函数;因为当行收起的时候,上面提到的那个动态创建用来容纳子表格的div,其里面的内容将会被自动移除(removed)。
现在来看看代码中到底多了哪些内容。
FetchPatentCasesAction代码:
- packagecn.gengv.struts2ex.jqGrid;
-
importjava.util.List;
-
importcom.byzl.hare.dao.impl.Criterion;
-
importcom.byzl.hare.model.Contact;
-
importcom.byzl.hare.model.PatentCase;
-
importcom.byzl.hare.service.ContactService;
-
@SuppressWarnings("serial")
-
publicclassFetchPatentCasesActionextendsJqGridBaseAction<PatentCase>{
-
privateContactServicecontactService;
-
privateContactcontact;
-
@Override
-
publicStringexecute(){
-
returnthis.refreshGridModel();
- }
-
@Override
-
publicintgetResultSize(){
-
returnthis.contactService.queryPatentCasesCount(contact);
- }
-
@Override
-
publicintgetResultSize(List<Criterion>criteria){
-
returnthis.contactService.queryPatentCasesCount(contact);
- }
-
@Override
-
publicList<PatentCase>listResults(intfrom,intlength){
-
returnthis.contactService.queryPatentCases(contact,from,length);
- }
-
@Override
-
publicList<PatentCase>listResults(List<Criterion>criteria,intfrom,
-
intlength){
-
returnthis.contactService.queryPatentCases(contact,from,length);
- }
-
@Override
-
publicvoidsortResults(List<PatentCase>results,Stringfield,Stringorder){
-
- }
-
publicvoidsetContactService(ContactServicecontactService){
-
this.contactService=contactService;
- }
-
publicContactgetContact(){
-
returncontact;
- }
-
publicvoidsetContact(Contactcontact){
-
this.contact=contact;
- }
- }
Action设置:
- <actionname="fetchPatentCases"class="cn.gengv.struts2ex.jqGrid.FetchPatentCasesAction">
-
<resultname="success"type="json">
-
<paramname="includeProperties">
- gridModel/[/d+/]/./w+,
- rows,page,total,record
-
</param>
-
<paramname="noCache">true</param>
-
<paramname="ignoreHierarchy">false</param>
-
</result>
-
</action>
javascript代码:
- $(function(){
-
-
$("#gridTable").jqGrid({
-
url:"jqGrid05.action",
-
datatype:"json",
-
mtype:"GET",
- height:350,
- width:600,
- colModel:[
-
{name:"id",index:"id",label:"编码",width:40},
-
{name:"lastName",index:"lastName",label:"姓",width:80},
-
{name:"firstName",index:"firstName",label:"名",width:80},
-
{name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},
-
{name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}
- ],
-
viewrecords:true,
- rowNum:15,
- rowList:[15,50,100],
-
prmNames:{search:"search"},
- jsonReader:{
-
root:"gridModel",
-
records:"record",
-
repeatitems:false,
- },
-
pager:"#gridPager",
-
caption:"联系人列表",
-
hidegrid:false,
-
shrikToFit:true,
-
subGrid:true,
-
subGridRowExpanded:function(subgrid_id,row_id){
-
varsubgrid_table_id;
-
subgrid_table_id=subgrid_id+"_t";
-
varsubgrid_pager_id;
-
subgrid_pager_id=subgrid_id+"_pgr"
-
-
$("#"+subgrid_id).html("<tableid='"+subgrid_table_id+"'class='scroll'></table><divid='"+subgrid_pager_id+"'class='scroll'></div>");
-
-
$("#"+subgrid_table_id).jqGrid({
-
url:"fetchPatentCases.action?contact.id="+row_id,
-
datatype:"json",
-
colNames:['编号','内部编码','名称','申请号'],
- colModel:[
-
{name:"id",index:"id",width:80,key:true},
-
{name:"internalNo",index:"internalNo",width:130},
-
{name:"name",index:"name",width:80,align:"right"},
-
{name:"applicationNo",index:"applicationNo",width:80,align:"right"}
- ],
-
jsonReader:{
-
root:"gridModel",
-
records:"record",
-
repeatitems:false
- },
-
prmNames:{search:"search"},
- pager:subgrid_pager_id,
-
viewrecords:true,
-
height:"100%",
- rowNum:5
- });
- }
- });
- });
说明:
- 由于FetchPatentCasesAction继承自JqGridBaseAction<PatentCase>,因此可以像之前的例子那样,使用这个Action类来应对jqGrid子表格的请求。
- FetchPatentCasesAction的Action设置也可以仿照其他针对jqGrid的Action来设置。
- 对于子表格Grid来说,和主表格Grid并没有什么分别,主表格中可以用的选项,在子表格中也可以使用。因此需要设置jsonReader等选项来配合FetchPatentCasesAction中的成员变量。
OK,就这么简单,子表格功能完成了。
分享到:
相关推荐
jqgrid与struts2结合的例子
自己搜集的jqGrid与Struts2的结合应用的方法
jqgrid+struts结合简单显示示例
jqGrid与Struts2 详细文档jqgrid 3.8详细文档 翻页,查询排序。
jqgrid+struts2+jdbc实现的增删改查
jqgrid+struts2+ibatis+oracle增删改查
jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用
struts配置文件和hibernate的配置文件都在src目录下 4.这就是jqGrid最简单的演示,没有加入任何其它功能, Good Luck! 有人问到没有spring,由于主要是演示jqGrid和jQuery的AJAX功能,所以没有加上spring框架, 如有...
jqGrid 、jqPlugin、Struts2结合例子
jqGrid详解及高级应用
Struts2 和 hibernate 演示 jqGrid, 使用Action中的 代码可以容易的把jqGrid 用于servlet或纯jsp. Struts 2.16, jqGrid 3.5b, hibernate 3.2 annotation 由于我的上传权限为20M,而我上传上的包括所有的源代码和支持...
jqgrid-subgrid支持数据的分层显示,样式也可以自己调整
jqGrid demo in Struts2 & Hibernate war file part2
jqGrid表格插件——参数配置,使用举例
jqgrid 编辑表格 一列
jqGrid demo in Struts2 & Hibernate war file (SQL Script included in WEB-INF\classes)
一个jqGrid结合struts2的实例,实现了基本的增删改查
; charset=utf-8"> <title>Insert title here ...<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> ...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jqgrid表格,单元格合并,并显示,demo版本