jqGrid：如何在添加/编辑表单对话框中灰显只读字段？

Question

我正在使用 jqGrid 来维护数据库，并且需要在添加/编辑表单对话框中将某些字段设为只读。我看到 jqGrid 在 editoptions 下支持只读字段，但是否有可能“灰显”只读输入框，以便有一个视觉提示让用户知道该字段是只读的且不可编辑？

提前致谢。

更新 感谢您快速回复奥列格！我尝试了您发布的内容，但在我的 IDE（Netbeans）中收到了很多代码警告。这是我的代码：

jQuery("#grid").jqGrid('navGrid','#grid_toppager', 
    {
         add:true,
         edit:true,
         view:true, 
         search:false, 
         del:false, 
         refresh:true
    },
    { // Edit form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         viewPagerButtons:false, //disables the arrows to next records
         topinfo:"Fields marked with (*) are required",
         resize:false,
         recreateForm: true,
         beforeShowForm: function ($form) {
             $form.find(".FormElement[readonly]")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
                  .closest(".DataTD")
                  .prev(".CaptionTD")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
    },  
    { // Add form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         topinfo:"Fields marked with (*) are required",
         resize:false,
         reloadAfterSubmit:true,
         closeAfterAdd: true
    },
    { // prmDel

    },

    { // prmSeach

    },

    { //prmView
         top:220,
         left:460
    }

); //jQuery("#grid").jqGrid('navGrid','#grid_toppager'  

还可以将灰色更改为稍暗的阴影吗？我需要用户仍然能够阅读它，但可以看到并理解它不可编辑的视觉提示。非常感谢奥列格

Answer 1

您可以使用beforeShowForm回调设置编辑表单的所有可读字段。

The demo 使用如下代码

$("#grid").jqGrid("navGrid", "#pager", {},
    {
        recreateForm: true,
        beforeShowForm: function ($form) {
            $form.find(".FormElement[readonly]")
                .prop("disabled", true)
                .addClass("ui-state-disabled")
                .closest(".DataTD")
                .prev(".CaptionTD")
                .prop("disabled", true)
                .addClass("ui-state-disabled");
        },
         // Add dialog options
    },
    {recreateForm: true}
);

它“灰显”编辑表单的所有只读文件：

您可以使用该字段上没有设置disabled 属性的原因，如果需要，您可以使用另一个类作为"ui-state-disabled"。我主要想展示如何选择所有你想“变灰”的字段。