jqGrid：编辑时禁用表单字段

Posted 2023-02-18

【中文标题】jqGrid：编辑时禁用表单字段

【英文标题】：jqGrid: Disable form fields when editing

【发布时间】：2011-03-25 05:14:16

【问题描述】：

我目前正在开发一个专为管理自动售货机等而设计的网络应用程序。 我决定在这个项目中使用 jQuery、jQuery UI 和 jqGrid，这样我就可以轻松地提供一个出色且高度可定制的用户界面。 不幸的是，jqGrid documentation 已经过时了，并没有涵盖这个出色插件的所有功能（因为我真的很喜欢它，尽管文档很差）。

无论如何，我想已经有足够的背景信息了。让我们进入正题： 我使用 jqGrid 内置的导航栏从网格中添加、编辑和删除项目。 除了一件事之外，我的工作就像一个魅力一样：某些字段可能仅在添加新项目时启用（或可见），而不是在编辑模式下（它们应该被隐藏和/或禁用）。

示例： 我工作的公司销售自动售货塔和 有几种类型（不同的 这些塔的大小和东西）。什么时候 一个新的塔被添加到一个位置，并且 进入系统，类型 必须设置。但是塔没有 随着时间的推移神奇地改变，所以这个 以后可能无法编辑该字段。

有谁知道这种行为是否可以通过更改一些初始化参数来实现？ 也许它是一个未记录的编辑选项 (editoptions) 或表单选项 (formoptions)？ 或者，也许您对此有一个简单的解决方案？

我很想听听您的建议/解决方案！ 谢谢=)

【参考方案1】：

您可以通过不同的方式实现您的要求。例如，在beforeShowForm 事件中，您可以隐藏或显示

jQuery("#list").jqGrid(
    colModel: [
         name: 'Name', width: 200, editable: true ,
   //...

).jqGrid('navGrid','#pager',  edit: true, add: true, del: false,
           // edit option
              beforeShowForm: function(form)  $('#tr_Name', form).hide(); 
          ,
           // add option
              beforeShowForm: function(form)  $('#tr_Name', form).show(); 
          );

其中 id“tr_Name”由“tr_”前缀和“Name”构成——来自colModel 的列的名称属性。

更新：在the answer 和another one 中显示了在初始化编辑之前如何动态更改属性的另一种方式。

更新 2：Free jqGrid 允许将 editable 定义为回调函数或 "disabled"、"hidden" 或 "readonly"。见the wiki article。它允许更轻松地实现相同的要求。

【讨论】：

感谢您的信息。此外，如果您想隐藏网格中的列但在添加或编辑表单中显示，则在 colModel 和 beforeShowForm 中使用 hidden: true 使用 show() 方法。

感谢您的解决方案。我还有一个小问题：编辑模式表单中的隐藏字段，在添加模式表单中设置为必需，所以在编辑客户端验证时告诉我：字段是必需的。

@Cargo：对不起，我无法理解你的问题。你能不能换个方式问这个问题？是否需要更改editrules 的required 属性的值？在beforeShowForm 内部你应该可以做到这一点。

嗨奥列格，很抱歉这个不清楚的问题。我有 2 个字段：用户名和密码。我希望在添加新行表单中，这两个字段都是必需的，并且在编辑表单中密码不会出现在表单中（被隐藏）。添加工作正常，但在编辑表单时需要完成密码（隐藏字段）。非常感谢。

@Oleg 在function(form) 中的参数form 代表什么？

【参考方案2】：

为了使该字段可编辑或不可编辑，这是我在搜索了一段时间的答案后最终编码的内容（在行内编辑中禁用编辑，但在“添加”时允许它）并且没有找到我的答案需要：

colModel :[ 
    name:'id', index:'id', editable:false, ...

    ).navGrid("#pager",edit:false,add:true,del:false,search:false,refresh:true,
        , // edit
           
            beforeInitData: function(formid) 
                $("#list").jqGrid('setColProp','id',editable:true);
            ,
            afterShowForm: function (formid) 
                $("#list").jqGrid('setColProp','id',editable:false);
            ,

【参考方案3】：

这是一个例子：

http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm

                  beforeShowForm: function(form) 
                     $('#tr_Name', form).hide();
                  

【讨论】：

嗨 josemaria，你能告诉我如何添加这个附加信息标签吗？我应该把这段代码放在哪里？谢谢。

【参考方案4】：

可见但不可编辑：

 // edit option
    beforeShowForm: function(form) 
        $('#col_name', form).attr("disabled", true);
    

【参考方案5】：

这将适用于免费的 jqgrid，简单明了：

此特定示例仅允许以“添加”形式进行编辑：

editable: function (options) 
                            // Allow edit only for "add" not for "edit"
                            if (options.mode === "addForm")
                            
                                return true;
                            
                            else if (options.mode === "editForm")
                            
                                return false;
                            
                            else
                            
                                return false;