jqGrid - 在编辑表单中分组字段 [英] jqGrid - Grouping fields in edit form

问题描述

编辑表单中的某些字段可以分组吗?

It is possible to group some fields in the edit form?

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

I would like to group some fields together, give them a summarizing name and give the group some different background color and maybe even border so the user can navigate more easily.

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

Suppose I have 4 entries in the colModel:

name
address
title
income

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

I would like to show it in the edit form like:

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

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

where the fields belonging to the Personal group/category would have - let's say - light green background and fields in the Business group would have light red background.

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

The difficulty is that there are lots of fields and I wouldn't want to give them background color on a one-by-one basis. And if there are groups then I could even use some collapse jQuery plugin to let the user to hide some of the groups.

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

Right now I'm struggling with custom_element creating some table around the group but no success yet.

正如 Tony 在 jQuery Grid 帮助论坛:

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

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 提出的那样的其他解决方案(感谢您的快速回复:).

So now there is no other solution like the one proposed by Oleg (thanks for the quick reply:).

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

I solved (partially) my task using his idea. Adding hrule containing table rows in the edit form, and finally styling the lines one-by-one.

相关部分:

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

******* 是 colModel 中的列名.

Where the ******* are the column names from the colModel.

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

Adding borders and making it collapsible is way too much fuss this way, so that will be skipped for now.

推荐答案

你可以做的几乎是在beforeShowForm 回调.我在 演示 上演示了这个想法，该演示是我为您快速制作的.该示例仅显示了您可以执行的操作的示例:

What you can do is almost free modifying of Add or Edit form inside of beforeShowForm callback. I demonstrate the idea on the demo which I quickly made for you. The example shows just an example of what you can do:

对应的代码是

$.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' 中使用的 'amount' 和 'closed') 是 colModel 中的列名.

I set $.jgrid.edit only to change beforeShowForm for both "Add" in "Edit" forms. The 'amount' and 'closed' used in .insertBefore('#tr_amount')) and insertBefore('#tr_closed') are the column names from the colModel.

这篇关于jqGrid - 在编辑表单中分组字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！