jQuery jqGrid：编辑时禁用表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3405029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid: Disable form fields when editing
提问by Arno Moonen
I'm currently developing a web application designed for the administration of vending machines and such.
I decided to use jQuery, jQuery UI and jqGrid for this project, so I can easily provide a great and highly customizable user interface.
Unfortunately, the jqGrid documentationis pretty outdated and doesn't cover all the features of this great plug-in (cause I do really like it, even though the documentation is rather poor).
我目前正在开发一个专为管理自动售货机等而设计的网络应用程序。我决定在这个项目中使用 jQuery、jQuery UI 和 jqGrid，这样我就可以轻松提供出色且高度可定制的用户界面。
不幸的是，jqGrid 文档非常过时，并没有涵盖这个伟大插件的所有功能（因为我真的很喜欢它，尽管文档相当糟糕）。
Anyway, enough background information, I suppose. Let's get to the point:
I use the navbar which is built-in to jqGrid to Add, Edit and Delete items from the grid.
I've got this working like a charm, except for one thing: some fields may only be enabled (or visible) when adding a new item and not when in editing-mode (they should be hidden and/or disabled).
无论如何，我想，足够的背景信息。让我们进入
正题：我使用 jqGrid 内置的导航栏从网格中添加、编辑和删除项目。
除了一件事之外，我已经让这个工作像魅力一样：某些字段可能仅在添加新项目时启用（或可见），而不是在编辑模式下（它们应该隐藏和/或禁用）。
Example:
The company I'm working for sells vending towers and there are several types (different sizes and stuff) of these towers. When a new tower is added to a location and entered into the system, the type must be set. But the tower doesn't magically change over time, so this field may not be edited later on.
示例：
我工作的公司销售自动售货机塔，这些塔有多种类型（不同大小和材料）。当一个新的塔被添加到一个位置并进入系统时，必须设置类型。但是塔不会随着时间神奇地改变，所以以后可能不会编辑这个字段。
Does anyone know if this behavior can be accomplished by changing some initialization parameters?
Perhaps it's an undocumented edit-option (editoptions) or form-option (formoptions)?
Or maybe you've got a simple solution for this?
有谁知道这种行为是否可以通过更改一些初始化参数来实现？
也许它是一个未记录的编辑选项（editoptions）或表单选项（formoptions）？
或者也许你有一个简单的解决方案？
I'd love to hear your suggestion / solutions!
Thanks =)
我很想听听您的建议/解决方案！
谢谢=)
回答by Oleg
You can implement your requirements in different ways. For example, inside of beforeShowFormevent you can hide or show the
您可以通过不同的方式实现您的需求。例如，在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(); }
});
where the id "tr_Name" is constructed from "tr_" prefix and "Name" - the name property of the column from the colModel.
其中 id "tr_Name" 是由 "tr_" 前缀和 "Name" - colModel.
UPDATED: In the answerand in another oneare shown one more way how the properties can be changed dynamically immediately before the editing will be initialized.
更新：在答案和另一个答案中，展示了如何在初始化编辑之前立即动态更改属性的另一种方式。
UPDATED 2: Free jqGridallows to define editableas callback function or as "disabled", "hidden"or "readonly". See the wiki article. It allows to implement the same requirements more easy.
更新 2：免费 jqGrid允许定义editable为回调函数或为"disabled","hidden"或"readonly"。请参阅维基文章。它允许更容易地实现相同的要求。
回答by Alz
To make the field editable or not, this is what I wound up coding after searching for an answer for a while (to disable editing on in-row edit, but allow it on 'Add') and not finding the answer I needed:
为了使该字段可编辑或不可编辑，这就是我在搜索答案一段时间后结束编码的内容（禁用行内编辑的编辑，但允许在“添加”中进行编辑）并且没有找到我需要的答案：
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});
},
回答by Youssef
Here is an example:
下面是一个例子：
http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm
http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm
beforeShowForm: function(form) {
$('#tr_Name', form).hide();
}
回答by Husni
Visible but not editable:
可见但不可编辑：
{ // edit option
beforeShowForm: function(form) {
$('#col_name', form).attr("disabled", true);
}
}
回答by Robert Smith
This will work with the free jqgrid, plain and simple:
这将适用于免费的 jqgrid，简单明了：
This particular example will allow edit only in the "add" form:
此特定示例将仅允许在“添加”表单中进行编辑：
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;
}
