jqgrid how to expand/collapse subgrid when click a row

问题

I need to click a row, and if

the subgrid is collapsed, then expand it.
the subgrid is expanded, then collapse it.

I found the question is here, but @Oleg sugesstion didn't work in my project. I have debuged it and found the "onSelectRow" will be executed twice. for example,

    onSelectRow: function (row_id) {
      alert("hello");
    },

It will get two alert. So, if I write this:

    onSelectRow: function (row_id) {
                $("#grd").toggleSubGridRow(row_id);
            },

it will expand and collapse,(actually, I can't see the process, I find it by debugging). This is my code, please ignore the Chinese in it.

jQuery("#grd").jqGrid({
            url:'__APP__/Spot_sales/get_sale_order_masters',
            mtype: 'post',
            datatype: "json",
            colNames:['id','uid','日期','销售单号','客户名称','应收金额','实收金额','状态'],
            colModel:[
                {name:'id',index:'id', hidden:true},
                {name:'uid',index:'uid', hidden:true},
                {name:'order_date',index:'order_date', width:100, align:'center'},
                {name:'orderNo',index:'orderNo', width:100, align:'center'},
                {name:'customer',index:'customer', width:100, align:'center'},
                {name:'sum_money',index:'sum_money', width:100, align:'center'},
                {name:'receive_money',index:'receive_money', width:100, align:'center'},
                {name:'status',index:'status', width:100, align:'center'}
            ],
            sortname: 'order_date',
            sortorder: "desc",
            viewrecords: true,
            pager:'#pager',
            rowNum:10,
            autowidth: true,
            height:'auto',
            multiselect: false,
            onSelectRow: function (row_id) {
                $("#grd").toggleSubGridRow(row_id);
            },
            subGrid : true,
            subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
                "minusicon" :"ui-icon-triangle-1-s",
                "openicon" : "ui-icon-arrowreturn-1-e",
                "reloadOnExpand" : true,
                "selectOnExpand" : true },
            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__/Spot_sales/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"
                });
            }

        }).navGrid("#pager",{edit:false,add:false,del:false,refresh:false,search:false});

回答1:

An option is to expand the subgrid on the row click event.

 $(document).on("click", "#grd tr.jqgrow", function (e) {
            var id = jQuery('#grd').jqGrid('getGridParam', 'selrow');
            if (id != null) {                     
                    jQuery('#grd').expandSubGridRow(id);                      


            }
        });

来源：https://stackoverflow.com/questions/19970683/jqgrid-how-to-expand-collapse-subgrid-when-click-a-row

标签

jqgrid

toggle

subgrid