jqGrid - 编辑表单中的分组字段

Question

是否可以在编辑表单中对某些字段进行分组？

我想将一些字段组合在一起，给它们起一个概括性的名称，并给组一些不同的背景颜色，甚至可能是边框，以便用户可以更轻松地导航。

假设我在 colModel 中有 4 个条目:

name
address
title
income

我想在编辑表单中显示它，例如:

Personal:----------
| name     [    ] |
| address  [    ] |
-------------------
Business:----------
| title    [    ] |
| income   [    ] |
-------------------

属于个人组/类别的字段将具有 - 比方说 - 浅绿色背景，而业务组中的字段将具有浅红色背景。

困难在于有很多字段，我不想逐个给它们设置背景颜色。如果有组，我什至可以使用一些折叠 jQuery 插件让用户隐藏一些组。

现在我正在为 custom_element 在组周围创建一些表而苦苦挣扎，但还没有成功。

---

解决方案

正如 Tony 在 jQuery Grid help forum: 上指出的那样

Currently this feature is not available or at last adding such functionality requiere to use fsome events and knowledge of the structure of the edit form.

We plan in the next major release to introduce a templating in form editing.

所以现在没有像 Oleg 提出的那样的其他解决方案(感谢您的快速回复:)。

我使用他的想法(部分)解决了我的任务。在编辑表单中添加包含表格行的 hrule，最后逐行设置样式。

相关部分:

$('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2"><hr/></td></tr>').insertBefore('#tr_********,');
$("#tr_*******,#tr_*******").css("background-color","#def");

******* 是 colModel 中的列名。

添加边框并使其可折叠这种方式太麻烦了，所以现在将跳过。

Answer 1

您几乎可以自由修改 beforeShowForm 中的添加或编辑表单打回来。我在 the demo 上展示了这个想法我很快就为你做了。该示例仅显示了您可以执行的操作的示例:

对应的代码是

$.extend($.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function($form) {
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Invice information (all about money):</b></div></td></tr>')
           .insertBefore('#tr_amount');
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Delivery information:</b></div></td></tr>')
           .insertBefore('#tr_closed');
    }
});

我设置 $.jgrid.edit 只是为了改变 beforeShowForm 为“编辑”表单中的两个“添加”。 .insertBefore('#tr_amount')) 和 insertBefore('#tr_closed' ) 是 colModel 中的列名。