Question

Inside Grid，在“批准/拒绝”列中有一个id为'txtRemarksByEntity'的文本框，OnRowCommand，我需要检索textbox的值。

function BtnProcurementApprovalByEntityClick(rowId, value) {
  var rowData = $('#GridProcureApprovalByEntity').getRowData(rowId);
  ReqIdApproval = rowData['RequestId'];
  ApprovalEntityId = rowData['approvalentityid'];
  ApprovalTypeId = rowData['approvaltypeid'];
  ApprovalStatusText = rowData['status_desc'];
  var ab = rowData["Approve/Reject"];
  var $str1 = $(ab);
  alert($str1.val());
}

在rowData变量中，我正在

Approval_Type:"Oprations"
Approve/Reject:"Remarks     <input type="text" id="txtRemarksByEntity"    class="txtRemarksByEntity" style="width: 250px">       <img src="images/yes1.PNG" style="cursor:pointer;" onclick="BtnProcurementApprovalByEntityClick(5 , 1)">        <img src="images/cross1.PNG" style="cursor:pointer;" onclick="BtnProcurementApprovalByEntityClick(5 , 2 )">"
RequestId:"51213"
Request_Id:"PR51213"
SrNo:"5"
approvalentityid:"2234"
approvaltypeid:"2"
status_desc:"<span style="color:#EAA66A"><b>Pending</b></span>"
statusid:"0"
undefined:"<button type="button" class="button edit" onclick="editProcureApprovalByEntity(5)">Edit</button>"

我正在动态绑定网格，如下所示

  $("#GridProcureApprovalByEntity").jqGrid({
    autowidth: true,
    height: 'auto',
    shrinkToFit: true,
    data: arr,
    datatype: "local",
    colNames: ['SrNo', 'PR No.', 'Approval Type', 'Approval Status', 'statusid', 'approvaltypeid', 'Approve/Reject', '', 'approvalentityid', 'RequestId'],
    colModel: [{
        name: 'SrNo',
        index: 'SrNo',
        width: 30,
        align: 'center'
    }, {
        name: 'Request_Id',
        index: 'Request_Id',
        width: 50,
        align: 'center'
    },
     {
         name: 'Approval_Type',
         index: 'Approval_Type',
         width: 100,
         align: 'center'
     }, {
         name: 'status_desc',
         index: 'Approval Status',
         width: 80,
         align: 'center',
         formatter: ApprovalFormatter
     }, {
         name: 'statusid',
         index: 'statusid',
         width: 0,
         hidden: true
     }, {
         name: 'approvaltypeid',
         index: 'approvaltypeid',
         width: 0,
         hidden: true
     },
    //{
    //            align:'center',
    //            formatter: function (cellvalue, options, rowobject) {
    //                return '<button type="button" class="button edit" onClick="editProcureApproval(' + options.rowId + ')">Edit</button>';
    //            }
    //        },

   {
       name: 'Approve/Reject',
       index: 'Approve/Reject',
       formatter: formateeApprovalByEntity, width: 250,
       align: 'center'
       },
  {
      formatter: formateApprovalByEntity, width: 50
  },
     {
         name: 'approvalentityid',
         index: 'approvalentityid',
         width: 0,
         hidden: true
     },
     {
         name: 'RequestId',
         index: 'RequestId',
         width: 0,
         hidden: true
     }

    ],
    pager: "#PagingGridProcureApprovalByEntity",
    rowNum: 10,
    //rowList: [1, 2, 3],
    //sortname: "Sno",
    //sortorder: "desc",
    viewrecords: true,
    gridview: true,
    autoencode: true,
    hoverrows: false,
    gridComplete: function () {
        var recs = $("#GridProcureApprovalByEntity").getGridParam("reccount"); // parseInt($("#GridApproval").getGridParam("records"));
        if (isNaN(recs) || recs == 0) {
            $("#dvProcureAppGridByEntity").hide();
        }
    },
    ondblClickRow: function (rowId) {

    },
    loadComplete: function () {
        $("tr.jqgrow:odd").css("background", "#EEF7FB");
    }
    //,        caption: "Approval Details"
}).jqGrid("navGrid", "#PagingGridProcureApprovalByEntity", {
    search: false,
    edit: false,
    add: false,
    del: false,
    refreshstate: "current"
});



 function formateeApprovalByEntity(cellvalue, options, rowobject) {
var str = '';
if (rowobject.statusid == "0") {
    str = 'Remarks     <input type="text" id="txtRemarksByEntity" class="txtRemarksByEntity" style= "width: 250px"/>' + '       ' +
        '<img src="images/yes1.PNG" style="cursor:pointer;" onClick="BtnProcurementApprovalByEntityClick(' + options.rowId + ' , ' + 1 + ')"/>' + '        ' +
        '<img src="images/cross1.PNG" style="cursor:pointer;" onClick="BtnProcurementApprovalByEntityClick(' + options.rowId + ' , ' + 2 + ' )"/>'
}
else {
    str = '';
}
return str;
}

$ str1.val（）总是“”

Answer 1

jqGrid的代码包含许多不正确的部分，但是你问的问题的主要原因是custom formatters的使用没有指定相应的unformatter。您应该定义unformat回调，获取来自单元格的数据。如果我正确理解您的代码，那么您可以使用，例如，

unformat: function (cellvalue, options, cell) {
    return $(cell).find(".txtRemarksByEntity").val();
}

其他一些错误：

永远不应该为自定义格式化程序中的任何元素赋予id相同的静态值。它会生成 id duplicates 。例如，您应该从id="txtRemarksByEntity"格式化程序中删除formateeApprovalByEntity。
name每列的colModel值应符合HTML中id的要求。在name内使用特殊字符是很糟糕的。例如，我建议将name: 'Approve/Reject'更改为name: 'Approve_Reject'。同样，列{ formatter: formateApprovalByEntity, width: 50 }是错误的。它是undefined的{{1}}值的来源。您必须为该列指定一些非空rowData值，例如name。
在name: "approval"中指定index属性是不好的，特别是如果您使用colModel。将通过复制datatype: "local"属性的值自动生成默认值index。列name中的值index: 'Approval Status'可能会阻止按列进行排序和搜索。我建议您从name: 'status_desc'

index

最后，我要求你指定你使用（可以使用）的jqGrid的版本，以及jqGrid（free jqGrid，商业Guriddo jqGrid JS的分支或版本中的旧jqGrid＆lt;您在关于jqGrid的每个问题中使用= 4.7）。我开发了免费的jqGrid fork，我建议你使用它。您可以直接从CDN加载它（参见the wiki article）。

Answer 2

您需要委派和使用数据属性

if (rowobject.statusid == "0") {
    str = 'Remarks     <input type="text" id="txtRemarksByEntity" class="txtRemarksByEntity" style= "width: 250px"/>' + '       ' +
        '<img class="imgRemarksByEntity" src="images/yes1.PNG" style="cursor:pointer;" data-rowID="[' + options.rowId + ' , ' + 1 + ']"/>' + '        ' +
        '<img class="imgRemarksByEntity" src="images/cross1.PNG" style="cursor:pointer;" data-rowid="[' + options.rowId + ' , ' + 2 + ']"/>'
}

并且

$("#someStaticParentOfImage").on"click",".imgRemarksByEntity",function() {
  var rowId=$(this).data("rowid");
  BtnProcurementApprovalByEntityClick(rowId[0],rowId[1]);
});

ID也必须是唯一的

如何获取文本输入字段的值？

2 个答案: