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" 。我主要想展示如何选择所有您想要“灰显”的字段。