在jqGrid的View模型中添加自定义行 [英] Adding Custom rows in View model in jqGrid

问题描述

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

I'm trying to show order particulars of a order in view model. Cliking on the order and view pager button passing the orderID. Using that orderID, I'm searching within another local json array. And I'm making a table contains search result array values and I'm adding it as new row in between rows that are already using in view model like the below image.

(从上图中，我为带颜色边框的行是新创建的行.其他行默认由jqGrid创建.)

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

I created successfully as other rows. But It giving some trouble while clicking on the view next or previous record button in view model. See this below image,

(不同行的表列值重复添加到单行中)

在此，我通过下一个(#nData)和上一个(#pData)按钮浏览8次记录.这样做时，我的客户行文本订单详细信息"的左侧<td>和下一个自动生成的row's(总计)右侧<td>的文本重复了8次.我每次点击下一个或上一个，都会在我的自定义行之后添加新行.

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.

这是我的代码，

  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 ?

并且我想使用local data myData2来配置subgrid，就像上面的条件一样.如果myData(主网格的本地json数组)和myData2(子网格的本地json数组)的orderID相同，请在父网格行的下面显示这些myData2记录.我认为所有网格都是已经配置相同的子网格概念.但是我找不到任何正确的文档或示例.请提供任何链接来按照上述配置子网格.

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.

解决方案:

我解决了我的问题.每次单击该模型的下一个或上一个按钮时，此视图模型都会刷新.因为，我用recreateform:true并在afterclickPgButtons和beforeShowForm上调用showIdRow.

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.

我认为它不会将我手动添加的行视为表单值之一.因为在创建表单时，内容是从myData(此网格的数据源)加载的.因此，当我浏览下一个或上一个按钮时，recreateform在其他行上工作，而afterclickPgButtons' and 'beforeShowForm在调用showIdRow并将下面的新行追加到已创建的行上.

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.

因此，我决定在附加新行的同时删除先前创建的新行.我已经将自定义行ID分配为trv_particulars.所以，我像这样使用我的代码，

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);
.
.

在我的情况下，现在可以正常工作了.但是@Oleg在下面的 answer 中提供了替代的最佳解决方案.感谢@Oleg抽出宝贵的时间为我的问题创建另一个可能的解决方案.

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.

推荐答案

我发现您的问题很有趣，因此我创建了演示，该演示演示了此类要求的可能实现.视图的结果如下图所示:

I find your question interesting and so I created the demo which demonstrates a possible implementation of such requirements. The results of the View looks like on the picture below:

对实现的一些评论.首先，我使用了网格的输入数据，其中包含在视图中创建订单明细"(订单明细")所需的详细信息:

Some comments to the implementation. First of all I used input data for the grid which contains detailed information needed to create "Order Details" ("Order Particulars") in the view:

var mydata = [
        { id: "1",  invdate: "2007-10-21", name: "test",   note: "3note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00",
            subgrid: [{no: "1", amount: "750"}, {no: "2", amount: "750"}, {no: "3", amount: "600"}, {no: "4", amount: "900"}] },
        { id: "2",  invdate: "2007-10-22", name: "test2",  note: "3note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00",
            subgrid: [{no: "1", amount: "750"}, {no: "2", amount: "600"}, {no: "3", amount: "900"}] },
        ...
    ];

每个项目的

subgrid属性都包含该信息.

subgrid property of every item contains the information.

接下来，我在带有关闭"列信息的行之后，在视图"表单的表中插入带有订单详细信息"(订单详细信息")的自定义行.我使用代码

Next, I insert in the table of the View form the custom row with "Order Details" ("Order Particulars") after the row with information about "close" column. I use the code

$("#trv_closed").after('<tr class="FormData">' +
    '<td class="CaptionTD form-view-label ui-widget-content" width="40%"><b>Order Particulars</b></td>' +
    '<td class="DataTD form-view-data ui-helper-reset ui-widget-content"><div style="width:100%;height:100%">' +
    '<table id="mysubgrid"><tr><td>' +
    '</td></tr></table>' +
    '</div></td></tr>');

在行"#trv_closed"之后添加行(行ID将根据关闭"列的名称来构造).

to add the row after the row "#trv_closed" (the id of the row will be constructed based on the name of "close" column).

然后可以用不同的方式来显示当前显示行的rowid.第一种方法是获取当前选定的行$this.jqGrid("getGridParam", "selrow").另一种方法:可以从包含具有行ID的<input>元素的隐藏列中获取信息.可以通过id="id_g"($("#id_g").val())或name="id"($form.find("input[name=id]").val())寻址<input>元素.我在代码中使用了$("#id_g").val().

Then one can rowid of the current displayed row in different ways. The first way will be to get the current selected row $this.jqGrid("getGridParam", "selrow"). Another way: one can get the information from hidden column which contains <input> element having the rowid. One can address the <input> element by id="id_g" ($("#id_g").val()) or by name="id" ($form.find("input[name=id]").val()). I uses $("#id_g").val() in my code.

现在可以使用getLocalRow获取所选行的subgrid属性(因为我们使用datatype: "local"):

Now one can get subgrid property of selected row using getLocalRow (because we use datatype: "local"):

var localRowData = $this.jqGrid("getLocalRow", rowid);
// localRowData.subgrid contains the required data

因此完整的代码是

$("#list").jqGrid("navGrid", "#pager", {edit: false, add: false, del: false, view: true, search: false}, {}, {}, {}, {}, {
    recreateForm: true,
    afterclickPgButtons: function (buttonName, $form, pos) {
        showDetails.call(this, $form);
    },
    beforeShowForm: showDetails,
    labelswidth: '40%'
});

其中函数showDetails的定义如下

var showDetails = function ($form) {
    var $this = $(this),
        rowid1 = $this.jqGrid("getGridParam", "selrow"),
        rowid = $("#id_g").val(), //id2 = $form.find("input[name=id]").val(),
        localRowData = $this.jqGrid("getLocalRow", rowid);
    if (isClosed === "Yes") {
        $("#trv_id").show();
    }
    if ($("#mysubgrid").length === 0) {
        // if not in afterclickPgButtons for example
        $("#trv_closed").after('<tr class="FormData">' +
            '<td class="CaptionTD form-view-label ui-widget-content" width="40%"><b>Order Particulars</b></td>' +
            '<td class="DataTD form-view-data ui-helper-reset ui-widget-content"><div style="width:100%;height:100%">' +
            '<table id="mysubgrid"><tr><td>' +
            '</td></tr></table>' +
            '</div></td></tr>');
         $("#mysubgrid").jqGrid({
             datatype: "local",
             data: localRowData.subgrid,
             colNames: ["#", "Amount"],
             colModel: [
                 {name: "no", width: 40, sorttype: "integer"},
                 {name: "amount", width: 70, sorttype: "integer"}
             ],
             idPrefix: "s",
             sortname: "no",
             rowNum: 1000,
             height: "auto"
         });
    } else {
        // update $("#mysubgrid") with new data
        $("#mysubgrid").jqGrid("clearGridData")
            .jqGrid("setGridParam", {data: localRowData.subgrid})
            .trigger("reloadGrid");
    }
};

这篇关于在jqGrid的View模型中添加自定义行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！