1，首先的引入一下样式咱们最熟悉的css完全是为了好看
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
2，是所依赖的一下js文件
<script type="text/javascript" src="lib/jquery.js"></script>//比较喽还在使用jquery
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/handlebars.js"></script>
<script type="text/javascript" src="lib/Handlebars_helper.js"></script>//handlebars方法的处理
<script type="text/javascript" src="js/formPlugin.js"></script>//分装的插件
<script type="text/javascript" src="js/formejson.js"></script>//这个就是具体的js使用3，贴出具体的js文件当然出了公用的网上可以找到的那就不用了吧！
@1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title></title>
</head>
<body>
<script type="text/template" id="temple">
<div>
{{#each formOptions}}
{{#if_eq type 'text'}}
<ul>
<li>{{json}}</li>
<li>{{this}}</li>
<li>{{this}}</li>
</ul>
{{else if_eq type 'select'}}
<ul>
<li>{{this}}</li>
<li>{{this}}</li>
<li>{{this}}</li>
<li>{{this}}</li>
</ul>
{{/if_eq}}
{{/each}}
</div>
</script>
<div id="htmlTemple"></div>
<!--<script type="text/javascript" src="lib/json.js"></script>-->
<script type="text/javascript" src="lib/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/handlebars.js"></script>
<script type="text/javascript" src="lib/Handlebars_helper.js"></script>
<script type="text/javascript" src="js/formPlugin.js"></script>
<script type="text/javascript" src="js/formejson.js"></script>
</body>
</html>
@2.插件formPlugin.js
(function($){
$.fn.formPlugin = function(options){
var defaultDatas = {
temp:'<form id="form{{formId}}" name="form{{formId}}" method="post">'+
'{{#each formOptions}}'+
'{{#if_eq type "text"}}'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
'<label>{{label}}</label>'+
'<input name="{{name}}" id="{{name}}" maxlength="{{maxlength}}" type="{{type}}" class="form-control input-sm" placeholder="{{placeholder}}" maxlength="[{{maxlength}}]" onkeyup="value=value.replace(/[^\w\.\/]/ig)">'+
'<span id="addPayBank_channelbankCode_err" style="color:red;"></span>'+
'</div>'+
'</div>'+
'{{else if_eq type "select"}}'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
'<label>{{label}}</label>'+
'<select name="{{name}}" class="form-control" data-enum-fetch="{{enum}}" style="width:100%;">'+
'{{#each items}}'+
'<option value="{{value}}">{{text}}</option>'+
'{{/each}}'+
'</select>'+
'</div>'+
'</div>'+
'{{else if_eq type "date"}}'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
'<label>{{label}}</label>'+
'<input name="{{name}}" id="{{name}}" type="{{type}}" class="form-control datepicker" placeholder="{{placeholder}}" maxlength="{{maxlegth}}" data-date-format="{{format}}" >'+
'<span id="addPayBank_channelbankCode_err" style="color:red;"></span>'+
'</div>'+
'</div>'+
'{{else if_eq type "textarea"}}'+
'<div class="col-sm-6">'+
'<div class="form-group">'+
'<label>{{label}}</label>'+
'<input name="{{name}}" rows="10" cols="30" id="{{name}}" type="{{type}}" class="form-control " placeholder="{{placeholder}}" maxlength="{{maxlegth}}" >'+
'<span id="addPayBank_channelbankCode_err" style="color:red;"></span>'+
'</div>'+
'</div>'+
'{{/if_eq}}'+
'{{/each}}'+
'</form>',
context:options.context
}
if(!options) return
if(options.temp){
//var options = $.extend(defaultDatas,options.temp);
defaultDatas.temp = options.temp
}else{
options = defaultDatas
}
if(options.context){
var templeate = Handlebars.compile(options.temp)
var htmltlp = templeate(options.context)
console.log(templeate)
$(this).html(htmltlp)
}
}
}(jQuery))
@3.动态获取的数据formejson.js
var formeDataTpl = {
"tableId": "xxxTable",
"formId": "testForm",
"modalId":"formEdit",
"modalName":"模态框名称",
"rowNum":'4',
"headers": [
"字段1",
"字段2",
"字段3",
"字段4",
"字段5",
"字段6",
"字段7",
"操作"
],
api: "gh.api.gateway.apimanager.api.list",
"pageOptions": [{
"rowNum":'4'
},
{
"name": "number",
"default": 1
},
{
"name": "size",
"default": 10
}
],
"formOptions": [{
"type": "text",
"label": "代理路径",
"name": "path",
"maxlength": 10,
"placeholder": "请输入代理路径"
},
{
"type": "text",
"label": "实际路径",
"name": "url",
"maxlength": 10,
"placeholder": "请输入实际路径"
},
{
"type": "select",
"label": "下来选项",
"name": "name",
"enum": "PRODUCTSTATUS",
"items": [
{
"text": "全部",
"value": ""
},
{
"text": "测试onedata",
"value": "onedata"
},
{
"text": "测试twodata",
"value": "onedata"
},
{
"text": "测试threedata",
"value": "onedata"
},
{
"text": "测试fourdata",
"value": "onedata"
},
]
},
{
"type": "date",
"label": "起始日期",
"name": "startDate",
"format": "YYYY-MM-DD",
"placeholder": "从",
"data-date-begin": "begin"
}, {
"type": "date",
"label": "enddate",
"name": "endDate",
"format": "YYYY-MM-DD",
"placeholder": "从",
"data-date-end": "end"
},{
"type": "textarea",
"label": "文本框输入",
"name": "textAdd",
"format": "YYYY-MM-DD",
"placeholder": "文本框输入",
"data-date-end": "end"
}
],
"columns": [{
"field": "apiName"
}, {
"field": "path",
"formatter": ""
}, {
"field": "serviceId",
"formatter": "index + 1"
}, {
"field": "stripPrefix",
"enum": "INSTITUTIONTYPE"
}, {
"field": "url"
}, {
"field": "retryable"
}, {
"field": "enabled"
}, {
"align": "center",
"buttons": [{
"text": "bbbb1",
"type": "button",
"class": "ddd123"
}, {
"text": "bbbb2",
"type": "button",
"class": "aaa123"
}],
"events": [{
"type": "click",
"class": "ddd123",
"action": "form:xxxModal:xxxFormId"
}, {
"type": "click",
"class": "aaa123"
}]
}]
}@4.调用的方法bar.js
var htmlTemple = $('#temple').html();
var template = Handlebars.compile(htmlTemple);
var htmlpl = template(formeDataTpl);
$('#textHtml').html(htmlpl)