formBuilder Preview Popup的应用
毛峻
需求:表单编辑完成之后,获取编辑的表单格式,转换成html格式存在数据库中以便后期用户填写
查看官方api找到了方法
jQuery(function($) { let options = { dataType: 'xml', onSave: function(evt, formData){showPreview(formData)}, formData: '<form-template><fields><field name="text-input-1454163102327" class="form-control" label="Text Field" description="" required="false" type="text" /><field name="date-input-1454163105133" class="form-control" label="Date Field" description="" required="false" type="date" /><field name="checkbox-group-1454163056695" label="Checkbox Group" style="multiple" description="" required="false" type="checkbox-group"><option value="option-1">Option 1</option><option value="option-2">Option 2</option></field></fields></form-template>' }; const $fbEditor = $(document.getElementById('fb-editor')); const formBuilder = $fbEditor.formBuilder(options); function showPreview(formData) { let formRenderOpts = { dataType: 'xml', formData }; let $renderContainer = $('<form/>'); $renderContainer.formRender(formRenderOpts); let html = `<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr>${$renderContainer.html()}</body></html>`; var formPreviewWindow = window.open('', 'formPreview', 'height=480,width=640,toolbar=no,scrollbars=yes'); formPreviewWindow.document.write(html); var style = document.createElement('link'); style.setAttribute('href', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); style.setAttribute('rel', 'stylesheet'); style.setAttribute('type', 'text/css'); formPreviewWindow.document.head.appendChild(style); } });
很混乱,看的老阔疼,,,,,没办法还是要继续看,先把例子局部copy到自己的项目中,因为我是用的vue,首先加载
LoadForm(){ var options = { dataType: 'xml', i18n: { locale: 'zh-CN'//汉化 }, showActionButtons: false ,// defaults: `true` } var fbEditor = document.getElementById('build-wrap'); this.formBuilder = $(fbEditor).formBuilder(options); formBuilder.promise.then(formBuilder => { }); },
将表单加载出来,然后将转换的方法单独写出来
GetHtmlData(formData) { let formRenderOpts = { dataType: 'xml', formData }; let $renderContainer = $('<form/>'); $renderContainer.formRender(formRenderOpts); let html = `<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr>${$renderContainer.html()}</body></html>`; this.HtmlData=html }
需要一个formData参数,给按钮添加@click事件,调用GetHtmlData,一开始传一个json格式发现拼接不成功,全部拼接成这样的了<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr><div class="rendered-form"></div></body></html>
后来看官方实例发现是需要一个xml格式的formData,使用
this.xmlData = this.formBuilder.actions.getData('xml');获取xml格式的数据,然后调用
this.GetHtmlData(_this.xmlData)成功
<!doctype html><title>Form Preview</title><body class="container"><h1>Preview</h1><hr><div class="rendered-form"><div class="fb-autocomplete form-group field-autocomplete-1540630744047"><label for="autocomplete-1540630744047" class="fb-autocomplete-label">自动完成</label><input class="form-control" id="autocomplete-1540630744047-input" autocomplete="off"><input name="autocomplete-1540630744047" class="form-control" id="autocomplete-1540630744047" type="hidden"><ul id="autocomplete-1540630744047-list" class="fb-autocomplete-list"><li value="1">选项 1</li><li value="2">选项 2</li><li value="3">选项 3</li></ul></div><div class="fb-autocomplete form-group field-autocomplete-1540630744199"><label for="autocomplete-1540630744199" class="fb-autocomplete-label">自动完成</label><input class="form-control" id="autocomplete-1540630744199-input" autocomplete="off"><input name="autocomplete-1540630744199" class="form-control" id="autocomplete-1540630744199" type="hidden"><ul id="autocomplete-1540630744199-list" class="fb-autocomplete-list"><li value="1">选项 1</li><li value="2">选项 2</li><li value="3">选项 3</li></ul></div><div class="fb-autocomplete form-group field-autocomplete-1540630744431"><label for="autocomplete-1540630744431" class="fb-autocomplete-label">自动完成</label><input class="form-control" id="autocomplete-1540630744431-input" autocomplete="off"><input name="autocomplete-1540630744431" class="form-control" id="autocomplete-1540630744431" type="hidden"><ul id="autocomplete-1540630744431-list" class="fb-autocomplete-list"><li value="1">选项 1</li><li value="2">选项 2</li><li value="3">选项 3</li></ul></div><div class="fb-autocomplete form-group field-autocomplete-1540630744534"><label for="autocomplete-1540630744534" class="fb-autocomplete-label">自动完成</label><input class="form-control" id="autocomplete-1540630744534-input" autocomplete="off"><input name="autocomplete-1540630744534" class="form-control" id="autocomplete-1540630744534" type="hidden"><ul id="autocomplete-1540630744534-list" class="fb-autocomplete-list"><li value="1">选项 1</li><li value="2">选项 2</li><li value="3">选项 3</li></ul></div><div class="fb-select form-group field-select-1540630747631"><label for="select-1540630747631" class="fb-select-label">选择</label><select name="select-1540630747631" class="form-control" id="select-1540630747631"><option value="1" selected="true" id="select-1540630747631-0">选项 1</option><option value="2" id="select-1540630747631-1">选项 2</option><option value="3" id="select-1540630747631-2">选项 3</option></select></div></div></body></html>前提引入form-render.min.js这个js不然会报$renderContainer.formRender is not undefined
类似资料：