在jqGrid的View模型中添加自定义行

我正在尝试在视图模型中显示订单的订单详细信息。点击“订单”和“view传呼机”按钮以传递orderID。使用那个orderID，我在另一个地方搜索local json array。我正在制作一个包含搜索结果数组值的表，并将其添加为视图模型中已在使用的各行之间的新行，如下图所示。

（从上面的图像中，我为带颜色边框的行是新创建的行。其他行默认情况下是由jqGrid创建的。）

我成功创建了其他行。但是在视图模型中单击视图的下一个或上一个记录按钮时，这会带来一些麻烦。看到下面的图片，

(different row's table column value append in a single row repeatedly)

In this I navigate records 8 times through next (#nData) and previous (#pData) buttons. While doing this, leftside <td> of my custome row's text "Order Particulars" and the next auto generated row's (Total) right side <td>'s text repated 8 times. My each click on next or previous, it appends new row after my custom row.

Here is my code,

  var myData2 = <?php echo json_encode($oParticularResult) ?>;
  //Here I'm adding custom row
  var showIdRow = function ($form) {
  var $this = $(this),
  rowid = $this.jqGrid("getGridParam", "selrow");
  var addHTML = '<tr class="FormData" id="trv_particulars"><td class="CaptionTD form-view-label ui-widget-content" 

width="30%"><b>Order Particulars</b></td>';
  addHTML += '<td class="DataTD form-view-data ui-helper-reset ui-widget-content" id="v_tot"><span>';
    addHTML += "<table border='2px'><thead><tr><td>Sl.No.</td><td>Particulars 

Name</td><td>Quantity</td><td>Amount</td></tr></thead><tbody>";
    var count = 1;
  for (i in myData2)
  {
  if(myData2[i].orderID == rowid)
  {
     addHTML += "<tr><td>"+count+"</td><td>"+myData2[i].proName+"</td><td>"+myData2[i].proQuantity+"</td><td>"+myData2

[i].proPrice+"</td></tr>";
     count++;
  }
    }
    $(addHTML).insertAfter('#trv_order_dt');
    };
    $(function () {
    var myData = <?php echo json_encode($orderResult) ?>;
  var getCellVal;
  var sel_id;
  $("#orderGrid").jqGrid({
  caption:'Order List',
  datatype:'local',
  data:myData,
  mtype:'POST',
  width:777,
  rowNum:10,
  height:100,
  sortorder:'asc',
  rowList:[10,20,30],
  rownumbers:true,
  viewrecords:true,
  gridview:false,
  autoencode:true,
  loadonce:true,
  pager:'#orderPager',
  sortname:'orderID',

  editurl:'<?php echo $this->action('editStatus'); ?>',
  colNames:['Order Number','Customer Name','Date', 'Total', 'Paid','Balance'],
  //cmTemplate:{editable:true, editrules: {required:true}},
  colModel:[
  { name:'orderID', key:true, width:30 },
  { name: 'custName', index: 'custName', width:60 },
  { name: 'order_dt', index: 'order_dt', width:60 },
  { name: 'tot', index: 'tot', width:60 },
  { name: 'amount', index: 'amount', width:60 },
  { name: 'bal', index: 'bal', width:60 }],
  }).navGrid("#orderPager",
  {add:false, edit:false, view:true, del:false, search:true, refresh:true },
  {},//edit
  {jqModal: true, viewPagerButtons: true, checkOnUpdate:true, savekey: [true,13], navkeys: [false,38,40], checkOnSubmit : 

true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true,width:600, height:300}, //add
  {jqModal: true, reloadAfterSubmit:true, closeOnEscape: true,width:600, height:300}, //del
  {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup:false, showQuery: true, 

overlay: true, recreateFilter: true,width:600, height:300 }, //search
  {jqModal: true, closeOnEscape: true, width:500,
  recreateForm: true,
  afterclickPgButtons: showIdRow,
  beforeShowForm: showIdRow
  } //view
  );
  });

Any one could point out where I missed ?

And I want to configure subgrid, using my local data myData2 like the above condition. If orderID of myData(local json array for master grid) and myData2 (local json array for subgrid) are same, show those myData2 records below to parent grid row. I think all grids are it is subgrid concept already configured like the same. But I could not find any correct document or example for this. Please provide any links to configure subgrid as per the above.

SOLUTION :

I fixed my issue. This view model refresh each time when we clicking on next or previous button in this model. Because, I used recreateform:true and I'm calling the showIdRow on afterclickPgButtons and beforeShowForm.

I think it will not consider the my manually added row as one of the form value. Because when the form creation, the contents are loading from myData (data source of this grid). So, when I navigate through the next or previous button, recreateform is working for other rows and afterclickPgButtons' and 'beforeShowForm are calling showIdRow and appending new row below to already created row.

So, I decided to remove previously created a new row, while appending a new row. I already assigned my custom row id as trv_particulars. So, I used my code like this,

.
.
$('#tvr_Particulars').remove();  // remove previously created custome row using row ID
$('#trv_order_dt').after(addHTML);
.
.

Now its working fine in my scenario. But alternative and optimal solution is provided by @Oleg in the below answer. Thanks to @Oleg for taking your time to create another possible solution for my issue.