formBuilder Preview Popup的应用

最新推荐文章于 2024-06-05 09:30:55 发布

CahierX

最新推荐文章于 2024-06-05 09:30:55 发布

阅读量301

点赞数

分类专栏： vue 文章标签： formBuilder

本文链接：https://blog.csdn.net/qq_35493664/article/details/83447799

版权

vue 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

需求:表单编辑完成之后,获取编辑的表单格式,转换成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

CahierX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
formBuilder Preview Popup的应用

需求:表单编辑完成之后,获取编辑的表单格式,转换成html格式存在数据库中以便后期用户填写查看官方api找到了方法jQuery(function($) { let options = { dataType: 'xml', onSave: function(evt, formData){showPreview(formData)}, formData: '&l...
复制链接

扫一扫

专栏目录