jqGrid：创建自定义编辑表单

我想在jqGrid中定制编辑表单，这样就不用使用提供的表结构布局，我想为表单元素使用我自己的定制css结构布局。我应该如何修改编辑表单以允许我使用自己的自定义外观

我建议您首先阅读（或至少仔细阅读）哪些部分实现了要更换的部件。您将看到它由2000多行代码组成。如果你写“我想……”，你应该了解实现你要求的工作量。如果您能够理解代码，并且即使使用jQueryUI之类的库也能够编写代码修改，那么您就可以决定是否值得投入时间来完成这项工作。使用现有解决方案的主要优点是节省时间。您所遇到的阻碍并不完美，但使用现有产品，您可以快速创建自己的解决方案，并且具有可接受的质量。研究你可以免费使用的现有产品的方法似乎更有效，因为在重新发明轮子方面进行了大量投资。

你完全可以通过jquery ui dialog实现这一点。但是，我不能为您提供完整的代码，但可以帮助您完成所需的步骤。 1设计你的自定义表单，无论你想应用什么样的CSS和样式。 假设这是你的定单

<div id="dialog-div">
    <input type="text">
</div>

默认情况下，它将按如下方式关闭：-

$("#dialog-div").dialog({
            autoOpen: false,
});

现在，当您获得变量中的数据时，您可以将其放入编辑表单中，并使用jquery对话框按钮根据您的逻辑保存它。

---

希望这对您有所帮助。

表格布局的常见问题是，列的宽度不同，尤其是那些非常宽的列

我解决了在beforeShowForm事件中将attr colspan添加到宽列中的问题

比如说

"beforeShowForm":function() {
    $('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}

这并不花哨，但对我来说很管用。也许有一种更优雅的方法可以做到这一点。

---

我可以将字段排列在多个列中，而无需将表单超宽。

当用户单击“编辑”按钮时，页面将根据Id导航到另一个页面，获取行的详细信息，您可以显示值

前面的答案解决了您的问题。

在表单编辑中使用模板

从版本4.8开始，我们支持表单编辑中的模板。这允许以开发人员希望的方式自定义编辑表单。要使用模板，需要在navigator的编辑添加/或添加选项中设置参数模板。这可以在navigator或编辑方法editGridRow中完成：

$("#grid").jqGrid("navGrid",
    {add:true, edit:true,...},
    {template: "template string for edit",...}
    {template: "template string for add",...},
...
);

在editGridRow方法中：

$("#grid").jqGrid("editGridRow",
   rowid,
   {template: "template string",...}
);

要在模板中放置CustomerID字段，应在模板字符串中插入以下代码字符串

{CustomerID}

---

换句话说，这是colModel的名字，放在{}

中，谢谢你，Oleg，也谢谢你，在过去几天里，我一直在读你的许多其他例子和评论。非常感谢您的大力帮助。我不打算重写代码，但我的一个想法是使用类似jQueryUI对话框的东西来替代jqGrid附带的标准表单。这可能吗？如果可能的话，你能给我一些建议吗。再次感谢。@rushwire:不客气！我很高兴我以前的回答也能帮助你。也许我不完全理解你想要什么，因为你用一种非常普通的方式来表达你的问题。jqGrid使用表结构布局创建表单。有一些方法可以自定义它，但它是。您可以更改表单中的标签、添加更多列、更改顺序等等，但它保持表结构布局。如果您想实现另一个布局（例如使用浮动div），则需要重写整个模块。也许对表单进行更简单的定制就足够了？这正是我所需要的。非常感谢。

{CustomerID}