程序博客网 > 如何优化js代码

jqGrid与Struts2的结合应用（八） —— 奇妙的subGrid子表格

来源：互联网 发布：如何优化js代码 编辑：程序博客网 时间：2024/05/17 01:01

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代码：

[java] view plaincopyprint?
  1. package cn.gengv.struts2ex.jqGrid;  
  2. import java.util.List;  
  3. import com.byzl.hare.dao.impl.Criterion;  
  4. import com.byzl.hare.model.Contact;  
  5. import com.byzl.hare.model.PatentCase;  
  6. import com.byzl.hare.service.ContactService;  
  7. @SuppressWarnings("serial")  
  8. public class FetchPatentCasesAction extends JqGridBaseAction<PatentCase> {  
  9.       
  10.     private ContactService contactService;  
  11.       
  12.     private Contact contact;  
  13.       
  14.     @Override  
  15.     public String execute() {  
  16.         return this.refreshGridModel();  
  17.     }  
  18.       
  19.     @Override  
  20.     public int getResultSize() {  
  21.         return this.contactService.queryPatentCasesCount(contact);  
  22.     }  
  23.     @Override  
  24.     public int getResultSize(List<Criterion> criteria) {  
  25.         return this.contactService.queryPatentCasesCount(contact);  
  26.     }  
  27.     @Override  
  28.     public List<PatentCase> listResults(int from, int length) {  
  29.         return this.contactService.queryPatentCases(contact, from, length);  
  30.           
  31.     }  
  32.     @Override  
  33.     public List<PatentCase> listResults(List<Criterion> criteria, int from,  
  34.             int length) {  
  35.         return this.contactService.queryPatentCases(contact, from, length);  
  36.     }  
  37.     @Override  
  38.     public void sortResults(List<PatentCase> results, String field, String order) {  
  39.         // TODO Auto-generated method stub  
  40.           
  41.     }  
  42.     public void setContactService(ContactService contactService) {  
  43.         this.contactService = contactService;  
  44.     }  
  45.     public Contact getContact() {  
  46.         return contact;  
  47.     }  
  48.     public void setContact(Contact contact) {  
  49.         this.contact = contact;  
  50.     }  
  51. }  


Action设置：

[xhtml] view plaincopyprint?
  1. <action name="fetchPatentCases" class="cn.gengv.struts2ex.jqGrid.FetchPatentCasesAction">  
  2.     <result name="success" type="json">  
  3.         <param name="includeProperties">  
  4.             gridModel/[/d+/]/./w+,  
  5.             rows,page,total,record  
  6.             </param>  
  7.         <param name="noCache">true</param>  
  8.         <param name="ignoreHierarchy">false</param>  
  9.     </result>  
  10. </action>  

 


javascript代码：

[javascript] view plaincopyprint?
  1. $(function(){  
  2.     // 配置jqGrid组件   
  3.     $("#gridTable").jqGrid({  
  4.         url: "jqGrid05.action",  
  5.         datatype: "json",  
  6.         mtype: "GET",  
  7.         height: 350,  
  8.         width: 600,  
  9.         colModel: [  
  10.               {name:"id",index:"id",label:"编码",width:40},    
  11.               {name:"lastName",index:"lastName",label:"姓",width:80},  
  12.               {name:"firstName",index:"firstName",label:"名",width:80},  
  13.               {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},  
  14.               {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}  
  15.         ],  
  16.         viewrecords: true,  
  17.         rowNum: 15,  
  18.         rowList: [15,50,100],  
  19.         prmNames: {search: "search"},  
  20.         jsonReader: {  
  21.             root:"gridModel",  
  22.             records: "record",  
  23.             repeatitems : false,  
  24.         },  
  25.         pager: "#gridPager",  
  26.         caption: "联系人列表",  
  27.         hidegrid: false,  
  28.         shrikToFit: true,  
  29.         subGrid: true,  // (1)开启子表格支持  
  30.         subGridRowExpanded: function(subgrid_id, row_id) {  // (2)子表格容器的id和需要展开子表格的行id，将传入此事件函数  
  31.             var subgrid_table_id;  
  32.             subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id  
  33.               
  34.             var subgrid_pager_id;  
  35.             subgrid_pager_id = subgrid_id + "_pgr"  // (4)根据subgrid_id定义对应的子表格的pager的id  
  36.               
  37.             // (5)动态添加子报表的table和pager  
  38.             $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");  
  39.               
  40.             // (6)创建jqGrid对象   
  41.             $("#" + subgrid_table_id).jqGrid({  
  42.                 url: "fetchPatentCases.action?contact.id="+row_id,  // (7)子表格数据对应的url，注意传入的contact.id参数  
  43.                 datatype: "json",  
  44.                 colNames: ['编号','内部编码','名称','申请号'],  
  45.                 colModel: [  
  46.                     {name:"id",index:"id",width:80,key:true},  
  47.                     {name:"internalNo",index:"internalNo",width:130},  
  48.                     {name:"name",index:"name",width:80,align:"right"},  
  49.                     {name:"applicationNo",index:"applicationNo",width:80,align:"right"}  
  50.                 ],  
  51.                 jsonReader: {   // (8)针对子表格的jsonReader设置  
  52.                     root:"gridModel",  
  53.                     records: "record",  
  54.                     repeatitems : false  
  55.                 },  
  56.                 prmNames: {search: "search"},  
  57.                 pager: subgrid_pager_id,  
  58.                 viewrecords: true,  
  59.                 height: "100%",  
  60.                 rowNum: 5  
  61.            });  
  62.        }  
  63.     });  
  64.       
  65. });  

 


说明：

  • 由于FetchPatentCasesAction继承自JqGridBaseAction<PatentCase>，因此可以像之前的例子那样，使用这个Action类来应对jqGrid子表格的请求。
  • FetchPatentCasesAction的Action设置也可以仿照其他针对jqGrid的Action来设置。
  • 对于子表格Grid来说，和主表格Grid并没有什么分别，主表格中可以用的选项，在子表格中也可以使用。因此需要设置jsonReader等选项来配合FetchPatentCasesAction中的成员变量。


OK，就这么简单，子表格功能完成了。



如何优化js代码 如何优化js代码
原创粉丝点击
热门IT博客
免费虚拟房屋设计软件免费虚拟房屋设计软件
淘宝卖家信誉淘宝卖家信誉
mac下载软件在哪
php substr函数 中文
linux ping不通 trace
linux c json转xml
全国计算机编程大赛
淘宝网开网店的流程
草图大师网络
人工智能用英语怎么说
淘宝店铺如何上传视频
linux安装python那些包
mac os 安装win7
2017淘宝儿童模特招聘
数据分析有前途吗
湖北广电网络收费标准
矩阵的迹
网络音乐制作软件
王克晶java年薪多少
江淮汽车 人工智能
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 仿瓷涂料墙壁脏了怎么办 油笔画到墙纸上怎么办 水笔画在墙纸上怎么办 屋里有股石灰味怎么办 厨房太阳对着晒怎么办 房子有太阳西斜怎么办 房子晒到太阳很热怎么办 房子被太阳热了怎么办 房间西晒窗帘不遮光怎么办 新建房屋一面墙体有裂缝怎么办 卫生间地砖缝隙出现渗水怎么办 西户窗户太晒怎么办 西晒的墙面很烫怎么办 儿童房颜色太粉了怎么办? 小孩在家里偷钱怎么办 脾气不好的猫该怎么办 二年孩子偷钱怎么办 孩子偷钱2000报警怎么办? 我儿子十岁老是偷钱怎么办 13孩子偷同学钱怎么办 孩子偷同学的钱怎么办 儿子十四岁了老偷钱怎么办 发现初中生的儿子偷钱怎么办 被亲戚怀疑儿子偷钱怎么办 房门选的太白了怎么办 大厅地砖颜色比墙砖浅怎么办 房屋外墙渗水物业不管怎么办 走丢了怎么办教学反思 托班教案迷路了怎么办 大班安全教案遇到小偷怎么办 小班孩子舞台表演找不到位置怎么办 懂你英语学完了怎么办 小班社会走丢了怎么办 帮小老鼠搬鸡蛋怎么办 小老鼠还能怎么办鸡蛋 中班教案走丢了怎么办 走丢了怎么办可后反思 社会走丢了怎么办教案 孩子一直不吃幼儿园的饭怎么办 大班安全游泳抽筋怎么办反思 汤洒了怎么办教学反思

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里