如何将数据从 jqgrid 行填充到文本框？

Question

我有一张桌子并使用 jqgrid。我想选择行，它会自动填满表格税箱。大佬有什么解决办法请帮忙

<table width="72%" border="0" cellspacing="5" cellpadding="0" style="background-color:#999;">

<tr>
    <th scope="col"></th>
    <th scope="col">Item Name</th>
    <th scope="col">Quantity</th>
    <th scope="col">Rate</th>
    <th scope="col">M. Unit</th>
    <th scope="col">Amount</th>
    <th scope="col"></th>
  </tr>
  <tr>
    <td><input style="border:1px solid #00C; width:85px;" name="itemId" id="itemId" type="hidden" /></td>
    <td><select style="border:1px solid #00C; width:130px;" name="ItemName" id="ItemName"></select></td>
    <td><input style="border:1px solid #00C; width:130px;" name="Quantity" id="Quantity" type="text" size="12" /></td>
    <td><input style="border:1px solid #00C; width:130px;" name="Rate" id="Rate" type="text" size="12" /></td>
    <td><input style="border:1px solid #00C; width:130px;" name="MeasuringUnit" id="MeasuringUnit" type="text" size="12" /></td>
    <td><input style="border:1px solid #00C; width:130px;" name="Amount" id="Amount" type="text" size="12" /></td>
    <td><input style="border:1px solid #00C; width:90px;" name="ItmAdd" id="ItmAdd" type="button" value="Add" size="12" /></td>
  </tr>

</table>

我的 Jqgrid 网格是

jQuery("#list").jqGrid({
                cache: false,
                async: false,
                url: '/NewOrder/getItemsByOrder/',
                datatype: 'json',
                mtype: 'POST',

                colNames: ['ItemId', 'ItemName', 'Quantity', 'Rate', 'Amount', 'Action'],
                colModel: [
                              { name: 'ItemId', index: 'Id', width: 100, align: 'center' },
                              { name: 'ItemName', index: 'ItemName', width: 100, align: 'center' },
                              { name: 'Quantity', index: 'Quantity', width: 200, align: 'center' },
                              { name: 'Rate', index: 'Rate', width: 200, align: 'center' },
                              { name: 'Amount', index: 'Amount', width: 200, align: 'center' },
                              { name: 'Action', index: 'Action', width: 100, align: 'center', formatter: 'actions',
                                  formatoptions: {
                                      keys: true,
                                      editbutton: true,
                                      updateOptions: function () {
                                          alert('Yes Selected');
                                      },
                                      delOptions: { url: '/myServer/MySite' }
                                  }
                              }
                          ],
                cellEdit: true,
                pager: jQuery('#pager'),
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'ItemId',
                sortorder: "desc",
                viewrecords: true,
                width: 950,
                imgpath: '/scripts/themes/coffee/images',
                caption: 'Order Details Grid',
                /*onSelectRow: function (rowid, status, e) {
                    if(e)
                        alert('Selected' + status);
                    else
                        alert('Not Selected' + status);
                }*/
                onCellSelect: function (rowid, iCol, cellcontent, e) {
                    //var $dest = $(e.target);
                    var grid = jQuery('#list');
                    var sel_id = grid.jqGrid('getGridParam', 'selrow');
                    var myCellData = grid.jqGrid('getCell', sel_id, 'ItemName');

                    alert('Value of = ' + cellcontent + "\n" + "\n" + 'ItemName=' + myCellData);
                    /*if ($td.hasClass("clickableTitle")) {
                    if ($dest.hasClass("ui-icon-locked")) {
                    $dest.removeClass("ui-icon-locked").addClass("ui-icon-unlocked");
                    } else {
                    $dest.removeClass("ui-icon-unlocked").addClass("ui-icon-locked");
                    }
                    }*/
                }
            });

主要是我想在 jqgrid 中选择一行，它会填满我的文本框我该怎么做，请帮助老板。

Answer 1

你应该使用

jqGrid('getGridParam','selrow');

这将返回选定的行 ID。您可以使用此行 ID 来获取如下所示的行值。如果没有选择任何行，这将返回 null。参考here。

如果要进行编辑或删除，jqgrid 已经在网格中编写了这些功能。你可以看到DOCUMENTATION。

 onSelectRow: function (id) {
    var myGrid = $('#list'),
    var selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
    var ItemId = myGrid.jqGrid('getCell', selRowId, 'ItemId');
    var ItemName = myGrid.jqGrid('getCell', selRowId, 'ItemName');
    var Quantity = myGrid.jqGrid('getCell', selRowId, 'Quantity');
    var Rate = myGrid.jqGrid('getCell', selRowId, 'Rate');
    var Amount = myGrid.jqGrid('getCell', selRowId, 'Amount');
    var Action = myGrid.jqGrid('getCell', selRowId, 'Action');
    document.getElementById('ItemId').value = ItemId;
    document.getElementById('ItemName').value = ItemName;
    document.getElementById('Quantity').value = Quantity;
    document.getElementById('Rate').value = Rate;
    document.getElementById('Amount').value = Amount;
    document.getElementById('Action').value = Action;
}