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?

提前致谢.

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

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

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屋！