jqGrid：如何将列添加到只读的编辑模式？答案

【问题标题】：jqGrid: How can I add columns to the edit modal that are read only?jqGrid：如何将列添加到只读的编辑模式？
【发布时间】：2014-01-28 13:31:17
【问题描述】：

我想在编辑对话框中添加几列是只读的，以便向用户显示他们正在编辑的数据行。选定的行只会非常微弱地突出显示，因此用户很难分辨他们正在编辑哪一行数据。有没有办法将列添加到编辑模式并使其成为只读？

这是我尝试过的，但没有一个有效。也许有一些我不太正确的 Javascript 主义，但我无法弄清楚。

是否有人能够将列添加到只读的编辑模式？

$("#prodTable").jqGrid('navGrid', '#pager', 
  { edit: true, add: false, del: false, search: false, refresh:true },
  { //  edit
    beforeInitData : function(formid) {
      console.log("beforeInitData formid: " + formid);
      //$("#" + "serialNumber").prop('readonly',true);
      //$("#prodTable_serialNumber").prop('readonly',true);
      //$("#prodTable_serialNumber").attr('readonly',true);
      //$("#jqgh_prodTable_serialNumber").attr('readonly',true);
      //$("#jqgh_prodTable_serialNumber").prop('readonly',true);
      $("#formid").prop('readonly',true);
    }
  }

【问题讨论】：

您写了“添加几列”。您是指对话框中包含来自网格不可编辑列的信息的附加字段，还是使用formoptions 的colpos 创建多列编辑表单（如the answer）？
我的意思是对话框中的附加不可编辑字段，以提醒用户他/她正在编辑哪条记录。

标签： jquery jqgrid

【解决方案1】：

表单编辑模式不允许在编辑对话框中插入不可编辑的字段。这是使用内联编辑可以提供更多优势的原因之一。我喜欢使用双击来开始内联编辑。在这种情况下，可编辑的列将被“转换”为文本<input>、下拉菜单、复选框等控件。如果用户按下 Enter 或“保存”按钮（取决于内联编辑的形式一次使用）将保存编辑的行。

如果您仍然更喜欢使用表单编辑，那么您可以通过至少两种不同的方式添加有关不可编辑列的所需信息。第一种方法是添加属性

editable: true, editoptions: {disabled: "disabled"}

到不可编辑的列。控件将显示的方式，但已禁用。为了使表单看起来更好，您可以另外使用我在the answer 中描述的方法。您应该将beforeShowForm 回调从答案修改为以下内容

beforeShowForm: function ($form) {
    $form.find(".FormElement[disabled]")
        .addClass("ui-state-disabled")
        .closest(".DataTD")
        .prev(".CaptionTD")
        .prop("disabled", true)
        .addClass("ui-state-disabled")
}

自定义添加/编辑表单的另一种选择：手动添加任何所需信息。相应的代码示例和演示请参见the answer 和this one。

【讨论】：