jqgrid学习（三）

最新推荐文章于 2023-04-15 14:11:55 发布

原创最新推荐文章于 2023-04-15 14:11:55 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #jquery

前端专栏收录该内容

12 篇文章

订阅专栏

这篇博客详细介绍了jqgrid中子表的展开和操作，包括onSelectRow事件用于处理选中行时的逻辑，以及如何通过点击事件展开子表。文章提及了expandSubGridRow方法用于展开子表格，并讨论了subGridRowExpanded方法在子表展开过程中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqgrid展开子表

1、onSelectRow 当选中表格中的行时将要发生的事情

onSelectRow:function (rowid,status) {

　　　　selId =rowid;　　//给最外层的selId赋值

2、子表格

三个方法，如下表，可以实现对subgrid的expand、collapse以及两者之间的切换（toggle）。

Method	Parameters	Returns	Description
expandSubGridRow	rowid	jqGrid object	dynamically expand the subgrid row with the id = rowid
collapseSubGridRow	rowid	jqGrid object	dynamically collapse the subgrid row with the id = rowid
toggleSubGridRow	rowid	jqGrid object	dynamically toggle the subgrid row with the id = rowid

$(document).on("click", "#grd tr.jqgrow", function (e) { //点击某一行触发方法，展开子表

var id = jQuery('#grd').jqGrid('getGridParam', 'selrow');

if (id != null) {

jQuery('#grd').expandSubGridRow(id);

}

});

onSelectRow: function (rowId) { $("#jqgrid_id").jqGrid ('toggleSubGridRow', rowId); }

onSelectRow: function (rowId) {
    $("#jqgrid_id").jqGrid ('collapseSubGridRow', rowId);
}
    $("#jqgrid_id").jqGrid ('collapseSubGridRow', rowId);

subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id;
                subgrid_table_id = subgrid_id+"_t";
                jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    url:'app/get_sale_order_details?so_id='+$("#grd").getRowData(row_id)['id'],
                    mtype: 'get',
                    data:{},
                    datatype: "json",
                    colNames: ['id','so_id','产品编号','数量','单位','单价'],
                    colModel: [
                        {name:"id",index:"id",hidden:true},
                        {name:"so_id",index:"so_id",hidden:true},
                        {name:"productNo",index:"productNo",width:100},
                        {name:"quantity",index:"quantity",width:100,align:"right"},
                        {name:"unit",index:"unit",width:80,align:"right"},
                        {name:"price",index:"price",width:100,align:"right"}
                    ],
                    rownumbers: true,
                    height: '100%',
                    sortname: 'id',
                    sortorder: "asc"
                });
            }

subGridRowExpanded这个方法默认在表格的最左边有一个“+”号，点击它可以展开子表。