如何從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("*********************");
        ...
            ...
            ...


    }