【发布时间】：2014-04-13 07:48:38
【问题描述】：
我正在尝试在视图模型中显示订单的订单详情。单击订单和view 传呼机按钮传递orderID。使用那个orderID，我在另一个local json array 中搜索。我正在制作一个包含搜索结果数组值的表，并将其添加为已在视图模型中使用的行之间的新行，如下图所示。
（从上图中，我颜色边框的行是新创建的行。其他行默认由jqGrid创建。）
我成功创建了其他行。但是在视图模型中单击视图下一个或上一个记录按钮时会带来一些麻烦。见下图，
（不同行的表列值重复追加到一行）
在此我通过下一个 (#nData) 和上一个 (#pData) 按钮导航记录 8 次。在执行此操作时，我的客户行文本“订单详情”的左侧<td> 和下一个自动生成的row's（总计）右侧<td> 的文本重复8 次。我每次点击下一个或上一个，它都会在我的自定义行之后附加新行。
这是我的代码，
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
);
});
谁能指出我错过了什么地方？
我想配置subgrid，使用我的local data myData2 就像上面的条件一样。如果myData（主网格的本地json数组）和myData2（子网格的本地json数组）的orderID相同，则将下面的myData2记录显示到父网格行。我认为所有网格都是已经配置的子网格概念。但是我找不到任何正确的文档或示例。请提供任何链接以按照上述配置子网格。
解决方案：
我解决了我的问题。每次单击此模型中的下一个或上一个按钮时，此视图模型都会刷新。因为，我使用了recreateform:true，我在afterclickPgButtons 和beforeShowForm 上调用showIdRow。
我认为它不会将我手动添加的行视为表单值之一。因为在创建表单时，内容是从myData（此网格的数据源）加载的。因此，当我浏览下一个或上一个按钮时，recreateform 正在处理其他行，afterclickPgButtons' and 'beforeShowForm 正在调用 showIdRow 并将下面的新行附加到已创建的行。
所以，我决定删除之前创建的一个新行，同时追加一个新行。我已经将我的自定义行 ID 分配为trv_particulars。所以，我就这样使用了我的代码，
.
.
$('#tvr_Particulars').remove(); // remove previously created custome row using row ID
$('#trv_order_dt').after(addHTML);
.
.
现在它在我的场景中工作正常。但是@Oleg 在下面的answer 中提供了替代和最佳解决方案。感谢@Oleg 花时间为我的问题创建另一个可能的解决方案。
【问题讨论】：
-
我建议您删除
#trv_particulars，而不是隐藏没有重复的 id。我的意思是你可以使用$('#tvr_Particulars').remove();而不是$('#tvr_Particulars').hide(); -
哦...是的...感谢您的建议@Oleg。我根据您的建议更新了我的解决方案。