基于模板的动态表单技术实现

场景：通过上传不同模板实现不同表单填写页面，表单预览，内容修改 

实现：将上传的html模板文件转换为字符串，储存在数据库，页面加载后台传过来的html字符串，显示表单，表单提交内容以json格式存储在数据库

上代码:

将上传的模板文件转换成字符串

public static String readToString(String fileName) {
String encoding = "UTF-8";
File file = new File(fileName);
Long filelength = file.length();
byte[] filecontent = new byte[filelength.intValue()];
try {
FileInputStream in = new FileInputStream(file);
in.read(filecontent);
in.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
try {
return new String(filecontent, encoding);
} catch (UnsupportedEncodingException e) {
System.err.println("The OS does not support " + encoding);
e.printStackTrace();
return null;
}
}

表单页面内容提交js代码

layui.use('form', function () {
var form = layui.form;
form.render();
//监听提交
form.on('submit(formDemo)', function (data) {
var a=JSON.stringify(data.field);
layui.data('formData', {
key: 'checkedData'
,value: a
});
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
return false;
});
});

回显填写内容js代码

layui.use('form', function () {
var form = layui.form;
form.val("form",${reportJson});
form.render();
});