jqGrid - 以编辑形式对字段进行分组

Question

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

我想将一些字段组合在一起，给它们一个总结名称，​​并为该组提供一些不同的背景颜色，甚至是边框，这样用户就可以更轻松地导航。

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

name
address
title
income

我想在编辑表单中显示它：

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

属于个人群组/类别的字段会有 - 比方说 - 浅绿色背景和商业群组中的字段会有浅红色背景。

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

现在我正在努力使用custom_element在该组周围创建一些表但尚未成功。

---

解决方案

Tony 指出jQuery Grid help forum:

  

目前此功能不可用或最后添加此功能需要使用fsome事件和编辑表单结构的知识。

     

我们计划在下一个主要版本中介绍表单编辑中的模板。

所以现在没有像 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。 'amount'和'closed'中使用的.insertBefore('#tr_amount'))和insertBefore('#tr_closed')是colModel中的列名。