码迷,mamicode.com
首页 > 其他好文 > 详细

jqGrid的subGrid子表格

时间:2017-12-27 18:05:00      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:技术   lis   names   一个   server   moved   运用   case   src   

使用完整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)。

现在来看看代码中到底多了哪些内容。

$(function(){  
    // 配置jqGrid组件   
    $("#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,  // (1)开启子表格支持  
        subGridRowExpanded: function(subgrid_id, row_id) {  // (2)子表格容器的id和需要展开子表格的行id,将传入此事件函数  
            var subgrid_table_id;  
            subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id  
              
            var subgrid_pager_id;  
            subgrid_pager_id = subgrid_id + "_pgr"  // (4)根据subgrid_id定义对应的子表格的pager的id  
              
            // (5)动态添加子报表的table和pager   
            $("#" + subgrid_id).html("<table id=‘"+subgrid_table_id+"‘ class=‘scroll‘></table><div id=‘"+subgrid_pager_id+"‘ class=‘scroll‘></div>");  
              
            // (6)创建jqGrid对象   
            $("#" + subgrid_table_id).jqGrid({  
                url: "fetchPatentCases.action?contact.id="+row_id,  // (7)子表格数据对应的url,注意传入的contact.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: {   // (8)针对子表格的jsonReader设置  
                    root:"gridModel",  
                    records: "record",  
                    repeatitems : false  
                },  
                prmNames: {search: "search"},  
                pager: subgrid_pager_id,  
                viewrecords: true,  
                height: "100%",  
                rowNum: 5  
           });  
       }  
    });  
      
});  
 

技术分享图片

 

jqGrid的subGrid子表格

标签:技术   lis   names   一个   server   moved   运用   case   src   

原文地址:https://www.cnblogs.com/dongh/p/8125952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!