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

Question

在 Grid 中，'Approve/Reject' 列中有一个 ID 为 'txtRemarksByEntity' 的文本框，OnRowCommand，我需要检索文本框的值。

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>"

我正在如下动态绑定(bind)网格

  $("#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 重复项。例如，您应该从 formateeApprovalByEntity 格式化程序中删除 id="txtRemarksByEntity"。
• colModel中每一列的name值应该对应HTML中id的要求。在 name 中使用特殊字符是不好的。例如，我建议将 name: 'Approve/Reject' 更改为 name: 'Approve_Reject'。同样，列 { formatter: formateApprovalByEntity, width: 50 } 是错误的。这就是rowData的undefined值的由来。您必须为该列指定一些非空的 name 值，例如 name: "approval"。
• 在 colModel 中指定 index 属性是不好的，尤其是当您使用 datatype: "local" 时。 index 的默认值将通过复制 name 属性的值自动生成。 name: 'status_desc' 列中的值index: 'Approval Status' 可以防止按列排序和搜索。我建议您从 colModel
中删除所有 index 属性

最后，我会要求您指定您使用(可以使用)的 jqGrid 版本，以及 jqGrid 的分支(free jqGrid，商业版 Guriddo jqGrid JS 或版本 <=4.7 的旧 jqGrid)，它你在每一个关于 jqGrid 的问题中使用。我开发了免费的 jqGrid 分支，我可以推荐您使用它。您可以直接从 CDN 加载它(参见 the wiki article )。