jqGrid: 在编辑时禁用表单字段

Question

jqGrid: 在编辑时禁用表单字段

17

我正在开发一个专门用于自动售货机管理等的Web应用程序。为了提供出色且高度可定制的用户界面，我决定在这个项目中使用jQuery、jQuery UI和jqGrid。
不幸的是，jqGrid文档已经过时，没有涵盖这个很棒的插件的所有功能 (尽管我确实很喜欢它，但文档相当简陋)。

总之，足够的背景信息，我们来谈谈重点：
我使用jqGrid内置的导航栏来添加、编辑和删除网格中的项目。虽然我成功地完成了这个功能，但还有一件事情：某些字段只能在添加新项目时启用（或可见），而在编辑模式下则不行（它们应该被隐藏和/或禁用）。

例子：
我所在公司销售贩卖塔，有几种类型（不同的大小和配置）。当将新贩卖塔添加到位置并输入系统时，必须设置其类型。但是这个塔不会随着时间的推移而自动更改，因此此字段以后可能无法编辑。

有人知道是否可以通过更改某些初始化参数来实现此行为吗？
也许这是一个未记录的编辑选项(editoptions)或表单选项(formoptions)？
或者您有一个简单的解决方案吗？我很想听听你的建议/解决方案！
谢谢 =)

- Arno Moonen

5个回答

8

如何让字段可编辑或不可编辑，我在搜索答案一段时间后编写了以下代码（用于禁用行内编辑中的编辑功能，但允许在“添加”中进行编辑），并没有找到我需要的答案：

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

- Alz

0

这里是一个例子：

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

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

- Youssef

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

0

可见但不可编辑：

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

- Husni

0

这将适用于免费的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;
                            }

- Robert Smith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

你可以用不同的方法来实现你的需求。例如，在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_"前缀和列colModel的"name"属性构成的。

更新：在答案中以及另一个答案中展示了一种在编辑初始化之前立即动态更改属性的方法。

更新2：Free jqGrid允许将editable定义为回调函数或"disabled"、"hidden"或"readonly"。请参见维基文章。它可以更轻松地实现相同的要求。