jqGrid:如何在“添加/编辑表单"对话框上将只读字段显示为灰色? [英] jqGrid: How to grey out read only fields on add/edit form dialog?

问题描述

我正在使用jqGrid维护数据库，并且需要使某些字段在添加/编辑表单"对话框上只读.我看到jqGrid支持editoptions下的只读字段，但是是否有可能以某种方式灰显"只读输入框，所以有一个直观的提示让用户知道该字段是只读的并且不可编辑?

I am using jqGrid to maintain a database and need to have certain fields read only on the add/edit form dialog box. I see that jqGrid supports read only fields under editoptions but is it possible to some how "grey-out" read only input boxes so there is a visual cue to let the user know that the field is read only and not editable?

谢谢.

更新 感谢您对Oleg的快速回复！我尝试了您发布的内容，但是在我的IDE(Netbeans)中收到很多代码警告.这是我的代码:

UPDATE Thank you for your fast reply Oleg! I tried what you posted but I'm getting a lot of code warnings in my IDE (Netbeans). Here is my code:

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

Also is it possible to change the grey to a slightly darker shade? I need the user to still be able to read it but see and understand the visual cue that it is uneditable. Thanks so much Oleg

推荐答案

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

You can use beforeShowForm callback to set all readable fields of edit form.

该演示使用以下代码

$("#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}
);

它灰显"所有编辑"表单的只读文件:

It "grey-out" all readonly filed of the Edit form:

您可以在字段上不使用任何原因设置disabled属性，并且可以根据需要使用其他类作为"ui-state-disabled".我主要想向您展示如何选择您要灰显"的所有字段.

You can use of cause no setting of disabled property on the the field and you can use another class as "ui-state-disabled" if you needed. I wanted mostly to show how to select all the fieled which you want to "grey-out".

这篇关于jqGrid:如何在“添加/编辑表单"对话框上将只读字段显示为灰色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！