jqgrid如何在单击一行时展开/折叠子网格

时间:2013-11-14 06:03:31

标签: jqgrid toggle subgrid

我需要点击一行,如果

  1. 子网格已折叠,然后展开。
  2. 展开子网格,然后将其折叠。
  3. 我发现问题是here,但@Oleg sugesstion在我的项目中不起作用。我已经对它进行了调查,发现“onSelectRow”将被执行两次。例如,

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

    它会得到两个警报。所以,如果我写这个:

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

    它会扩展和崩溃,(实际上,我看不到这个过程,我通过调试找到它)。 这是我的代码,请忽略其中的中文。

    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 个答案:

答案 0 :(得分:1)

一个选项是在行单击事件上展开子网格。

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


            }
        });