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

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回调来设置编辑表单的所有可读字段.

该演示使用以下代码

$("#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"就像您需要的那样.我主要想要展示如何选择你想要"灰掉"的所有被击中的东西.