Establish Subgrid and manipulate row data in Jqgrid

$ (document). Ready (function () {
$ ("#grid"). Jqgrid ({
Url:testurl,
DataType: ' JSON ',
Mtype: ' POST ',

colnames:[' <b> name </b> ', ' <b> show Times </b> ', ' <b> clicks </b> ', ' <b> click-through </b> ' ],
colmodel:[
{name: ' name ', index: ' Name ', Sortable:false,width:150,editable:false,editoptions:{readonly:false,size:15},align: ' Left "},
{name: ' Show ', Index: ' Show ', Sortable:true,width:130,editable:false,editoptions:{size:10},align: ' Right '},
{Name: ' click ', Index: ' Click ', Sortable:true,width:140,editable:false,editoptions:{size:25},align: ' Right '},
{name: ' cr ', index: ' CR ', sortable:true,width:140,editable:false,editoptions:{readonly:true,size:10},align: ' Right ' },
],
Pager: $ (' #pager '),//Paging layer
ROWNUM:20,//number of records per page
ROWLIST:[10,20,30],//an array to adjust the number of records displayed in the table
Imgpath: ' themes/sand/images ',//Picture path
Sortname: ' 1 ',//column name, this parameter will be uploaded to the background
Viewrecords:true,//whether to display the total number of records
SortOrder: "desc",//sort order, ascending or descending (ASC or DESC)
Shrinktofit:true,
Autowidth:true,
Subgrid:true,
Subgridurl: ',
Subgridmodel: [{//name: [', ', ', ', ', ', ', ', ', ', ', ', ', ', ', '],
Name: [', ', ', ', ', '],
Width: [147,127,137,137,157,157,157],
Width: [296,253,275,270],
Align: ["Left", "right", "right", "right", "right", "right", "right"],
params:[' Invdate ']}

//],
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: ' __url__/getgridlist/openjqgrid/1/segmentype/groups/method/getsecondareabyareaid ' +JQGRID_PARAMETER+ '? id= ' + ROW_ID,
DataType: "JSON",
Mtype: ' POST ',
Colnames:[', ', ', ', ', ',
Colmodel: [
{name: ' name ', index: ' Name ', Sortable:false,width:296,editable:false,align: ' Left '},
{name: ' Show ', Index: ' Show ', Sortable:true,width:253,editable:false,align: ' Right '},
{Name: ' click ', Index: ' Click ', Sortable:true,width:275,editable:false,align: ' Right '},
{name: ' cr ', index: ' CR ', sortable:true,width:270,editable:false,align: ' Right '}
],
Sortname: ' 1 ',
SortOrder: "Desc",
Altrows:true,
Height: "100%",
Caption: "",
Shrinktofit:true,
Autowidth:true,
Gridcomplete:function () {
Hide title bar
var p= $ ("#" +subgrid_table_id). Parent () parent (). Parent ()
p=$ (P). Find ("table").
Get all row data
var subobj = $ ("#" +subgrid_table_id). Jqgrid ("GetRowData");
var show = 0;
var click = 0;
var Cr;

For (Var i=0, len=subobj.length i<len; i++) {
Show + + parseint (Subobj[i].show.replace (",", ""));
Click + = parseint (Subobj[i].click.replace (",", ""));
}
var RowData = $ ("#grid"). Jqgrid ("GetRowData", row_id); Gets the row data for the specified row_id
if (parseint (RowData.show.replace (",", ""))!= show) {
if (show!= 0) {
CR = (click*100/show). toFixed (2) + "%";
} else {
CR = "0%";

}

Set row data
$ ("#area_grid"). Setrowdata (row_id, {show:formatnum (show.tostring ()), Click:formatnum (Click.tostring ()), CR:CR});
}
}
});
},


Multiboxonly:true,//define whether you can select multiple
Multiselect:true,
Altrows:true,//Set the table zebra-striped value (define Interlace color)
Height: "100%",//Set table height
Prmnames: {_search: "Search"},
Caption: ""//define table name
});
JQuery ("#area_grid"). Jqgrid (' Navgrid ', ' #pager ', {add:false,edit:false,del:false,search:false,refresh:false});
JQuery ("#area_grid"). Jqgrid (' Navbuttonadd ', ' #pager ', {
Caption: "Custom Columns",
Title: "Move from left to right",
Onclickbutton:function () {jQuery ("#area_grid"). Jqgrid (' Columnchooser ');
});

});