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.

托尼在

当前此功能不可用，或者最后添加了此功能要求，以使用严重事件和对编辑表单结构的了解.

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:).

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

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屋！