jqgrid学习（三）

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这个方法默认在表格的最左边有一个“+”号，点击它可以展开子表。