FormBuilder 项目中的控件分组功能实现解析

FormBuilder 是一个流行的表单构建工具，它允许开发者通过拖拽方式快速创建复杂的表单界面。在实际应用中，随着自定义控件的增多，控件面板可能会变得杂乱无章。本文将深入探讨如何为 FormBuilder 实现控件分组功能，以提升用户体验。

问题背景

在 FormBuilder 项目中，当开发者添加大量自定义控件时，右侧的控件面板会变得拥挤且难以管理。原生 FormBuilder 虽然提供了 inputSets 选项来实现简单的控件分组，但其界面效果较为基础，无法满足更复杂的分组需求。

技术实现方案

基础实现思路

通过 MutationObserver 监听 DOM 变化，当控件加载完成后，动态创建分组元素并将相关控件归入其中。核心实现步骤如下：

1. 创建分组容器元素
2. 查找目标自定义控件
3. 将控件移动到分组容器中
4. 添加展开/折叠功能

代码实现要点

$(document).ready(function(){
    if (window.jQuery) {  
        var customControlsAdded = false;
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    var frmbControl = $('.frmb-control');
                    if (frmbControl.length) {
                        var groupNames = ['分组1', '分组2'];
                        var customControlTypes = [
                            ['控件类型1','控件类型2'], 
                            ['控件类型3','控件类型4'],
                        ];
                        
                        groupNames.forEach(function(groupName, index) {
                            var groupElement = $('<li class="input-control-group ui-sortable-handle"><span><span class="control-icon">≡</span>' + groupName + '</span></li>'); 
                            frmbControl.append(groupElement);
                            
                            var customControls = $('li').filter(function() {
                                return customControlTypes[index].includes($(this).data('type'));
                            });
                            
                            groupElement.children('span').off('click').on('click', function() {
                                customControls.toggle();
                            });
                            
                            customControls.hide();
                            var firstCustomControl = customControls.first();
                            groupElement.insertBefore(firstCustomControl);
                            customControls.appendTo(groupElement);
                        });
                        
                        customControlsAdded = true;
                        observer.disconnect();
                    }
                }     
            });
        });
        observer.observe(document, { childList: true, subtree: true });
    }
})

关键问题解决

1. 重复触发问题：原生的点击事件会同时作用于分组元素和内部控件，导致重复触发。解决方案是在分组元素上去掉 input-control 类名，并修改事件监听器只匹配 li.input-control。

2. 无限循环问题：将 customControlsAdded 标志变量移到观察器外部，避免每次触发观察回调时重置。

3. 拖拽禁用问题：通过修改 FormBuilder 源码，使排序功能只作用于 li.input-control 元素，忽略分组容器。

最佳实践建议

1. 分组命名规范：为分组使用清晰、一致的命名，方便用户快速识别。

2. 控件分类逻辑：按照功能或业务领域对控件进行分组，而不是简单按类型。

3. 默认展开状态：可以考虑让常用分组默认展开，提升用户体验。

4. 视觉区分：为分组标题添加适当的样式，如背景色、图标等，增强可识别性。

实现效果

最终实现的分组功能具有以下特点：

• 可折叠/展开的分组容器
• 保持原有控件的功能完整性
• 不影响拖拽排序功能
• 视觉上清晰区分不同分组

总结

通过本文介绍的方法，开发者可以在 FormBuilder 中实现灵活、美观的控件分组功能。这种方案不仅解决了控件过多导致的界面混乱问题，还为用户提供了更好的操作体验。核心在于巧妙地利用 DOM 操作和事件处理，同时注意与原有功能的兼容性。