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

Question

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

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

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

name
address
title
income

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

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

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

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

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

---

解

正如Tony在jQuery Grid帮助论坛上指出的那样:

目前,此功能不可用,或者最后添加此类功能需要使用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回调中自由修改Add或Edit表单.我在快速为您演示的演示中演示了这个想法.该示例仅显示了您可以执行的操作的示例:

相应的代码是

$.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.