Question

我目前正在开发一个专门用于管理自动售货机等的Web应用程序。我决定在这个项目中使用jQuery，jQuery UI和jqGrid，因此我可以轻松提供一个高度可定制的用户界面。
不幸的是， jqGrid documentation 已经过时了，并没有涵盖这个优秀插件的所有功能（因为我真的很喜欢它，即使文档很差）。< / p>

无论如何，我想有足够的背景信息。让我们明白一点：
我使用内置于jqGrid的导航栏来添加，编辑和删除网格中的项目我有一个像魅力一样的工作，除了一件事：一些字段可能只在添加新项目时启用（或可见），而不是在编辑模式时（它们应该被隐藏和/或禁用）。

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

是否有人知道是否可以通过更改某些初始化参数来实现此行为？也许它是一个未记录的编辑选项（ editoptions ）或表单选项（ formoptions ）？
或者你可能有一个简单的解决方案吗？

我很想听听你的建议/解决方案！谢谢=）

Answer 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。它允许更容易地实现相同的要求。

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

Answer 3

以下是一个例子：

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

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

Answer 4

可见但不可编辑：

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

Answer 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;
                            }

jqGrid：编辑时禁用表单域

5 个答案: