Question

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

提前致谢。

更新谢谢你的快速回复Oleg！我尝试了你发布的内容，但我在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'

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

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}
);

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

enter image description here

您可以在字段中使用原因而不设置disabled属性，如果需要，可以使用另一个类"ui-state-disabled"。我主要想要显示如何选择你想要“灰显”的所有fieled。

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

1 个答案: