javascript - 如何从 AlloyUI 表单构建器中提取结构？

Question

我一直在玩 AlloyUI 表单构建器，但我找不到如何获取我一直在编辑的表单的数据。我查看了文档，代码......我是盲人吗？:-)

谢谢！克里斯

Answer 1

持久化生成的表单以供以后表示是您必须自己做的事情，因此您可以决定更适合您需要的结构。您要查找的属性存储在表单的字段中。

一个粗略的想法可能是遍历fields数组并提取您想要的信息。例如：

var formXML = '<root>';

formBuilder.get('fields').each(
    function(item, index, collection) {
        var dataType = item.get('dataType'),
            indexType = item.get('indexType'),
            label = item.get('label'),
            multiple = item.get('multiple'),
            name = item.get('name'),
            options = item.get('options'),
            readOnly = item.get('readOnly'),
            repeatable = item.get('repeatable'),
            required = item.get('required'),
            showLabel = item.get('showLabel'),
            type = item.get('type'),
            width = item.get('width');

        var fieldXML = '<field>';
        fieldXML += '<type>' + dataType + '</type>';
        fieldXML += '<name>' + name + '</name>';
        fieldXML += '<required>' + required + '</required>';
        fieldXML += '</field>';
    }
}

formXML += '</root>';

然后，您可以保存该 xml 并稍后使用它来复制您从站点的其他部分编辑的表单。

Answer 2

定义表格

<div id="myFormBuilder"></div>

然后建立表格

<script>
AUI().use(
        'aui-form-builder',
          function(A) {
            window.myFormBuilder= new A.FormBuilder(
              {
                availableFields: [
                  {
                    iconClass: 'aui-form-builder-field-icon-text',
                    id: 'uniqueTextField',
                    label: 'Text',             
                    type: 'text',               
                    width: 75
                    hiddenAttributes: ['showLabel','readOnly','required'],
                  },
                  {
                    hiddenAttributes: ['showLabel','readOnly','required'],
                    iconClass: 'aui-form-builder-field-icon-textarea',
                    label: 'Rich editor',
                    type: 'textarea'
                  }  

                ],
                boundingBox: '#myFormBuilder',
                fields: [
                  { name: 'change me',
                    label: 'Text',             
                    predefinedValue: 'chicago',
                    type: 'text'
                  }
                ]
              }
            ).render();
          }
        );

然后，我有一个按钮，当我单击它时，我会通过 ajax 调用以保存表单

<aui:button id="saveFieldsForm" onClick="saveFieldsForm()" name="saveFieldsForm" value="saveFieldsForm" />

最后是 saveFieldsForm() 函数

function saveFieldsForm(){  
    var formXML = '<root>';

    myFormBuilder.get('fields').each(
    function(item, index, collection) {
        var dataType = item.get('dataType'),
            indexType = item.get('indexType'),
            label = item.get('label'),
            multiple = item.get('multiple'),
            name = item.get('name'),
            options = item.get('options'),
            readOnly = item.get('readOnly'),
            repeatable = item.get('repeatable'),
            required = item.get('required'),
            showLabel = item.get('showLabel'),
            type = item.get('type'),
            tip = item.get('tip'),
            predefinedValue= item.get('predefinedValue'),
            width = item.get('width');

        var fieldXML = '<field>';
        fieldXML += '<type>' + type + '</type>';
        fieldXML += '<name>' + name + '</name>';
        fieldXML += '<required>' + required + '</required>';
        fieldXML += '<tip>' + tip + '</required>';
        fieldXML += '<predefinedValue>' + predefinedValue + '</predefinedValue>';        
        fieldXML += '</field>';
        alert("fieldXML: "+ fieldXML);
        formXML += fieldXML;
    });

    formXML += '</root>';
     alert("formXML: "+ formXML);

     AUI().use('aui-io-request',
                function(A) {           

            A.io.request(
                '<%=ajaxURL%>',{
                    data: {                         

                        formXML : formXML,

                    },
                    dataType: 'json',
                    on: {                                                                                            
                            success: function(data) {   
                                alert("Your form has been saved!")

                            },

                            error: function(jqXHR, textStatus, errorThrown) {

                                alert("Error, the content has not been saved! Please try again...");    
                                console.log(textStatus, errorThrown);                       

                                }           
                        }
                });    
                }); 


}

在 portlet 中

private String saveFormBuilder(ResourceRequest resourceRequest) {

        String formXML = ParamUtil.getString(resourceRequest, "formXML");

        _log.debug("*********************");
        _log.debug("articleId: "+articleId);        
        _log.debug("formXML: "+formXML);
        _log.debug("*********************");
        ...
            ...
            ...


    }