下面的例子是使用JsRender生成简单的Input,Select,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用JsRender动态生成input</title> <style> * { margin: 0px; padding: 0px; margin: 0 auto; } #contentDiv { width: 800px; margin: 0 auto; border-bottom: 2px solid #e6e6e6; padding:0 0 10px 0; } #titleDiv { padding: 30px 0 5px 5px; font: 500 18px "微软雅黑"; } #inputDiv { border-top: 2px solid #e6e6e6; vertical-align: middle; padding: 5px 0 0 7px; } #inputDiv table td{ padding: 2px 0; } #inputDiv input { width: 120px; } #inputDiv span { font-size: 14px; } .fixClass { width: 120px; height: 22px; line-height: 20px; } #submitDiv { padding: 20px 0 15px 0; text-align: center; } .spanClass { color: #fff; background: #89D900; height: 25px; width: 100px; display: inline-block; line-height: 25px; font-weight: bold; text-align: center; cursor: pointer; } .banClass { padding: 0 20px 0 20px; } </style> <script type="text/javascript" src="../../js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../../js/wdatepicker/WdatePicker.js"></script> <script type="text/javascript" src="../../js/jsrender/jsrender.js"></script> <script id="textTemp" type="text/x-jsrender"> <input type="text" id="{{:V_KEY}}" name="{{:V_KEY}}"> </script> <script id="dateTemp" type="text/x-jsrender"> <input type="text" id="{{:V_KEY}}" name="{{:V_KEY}}" class="Wdate" onfocus="WdatePicker({{:V_DateFocus}})"> </script> <script id="selectTemp" type="text/x-jsrender"> <select name="{{:V_KEY}}" id="{{:V_KEY}}" class="fixClass"> <option value="-1">所有</option>' {{for selectData}}' <option value="{{:S_KEY}}">{{:S_VALUE}}</option> {{/for}} </select> </script> <script id="hiddenTemp" type="text/x-jsrender"> <input type="hidden" id="{{:V_KEY}}" name="{{:V_KEY}}" value="{{:V_VALUE}}" /> </script> <script type="text/javascript"> function generateTableData(v_jsonData, v_form) { var jsonData = v_jsonData.data; var varTableHtml = '<table cellpadding="0" cellspacing="0" border="0" width="100%">'; for (var i = 0, len = jsonData.length; i < len;) { varTableHtml += "<tr>"; /* 注意不要越界 */ for (var j = 0; j < 3&&i<len; j++) { var varType = jsonData[i].V_TYPE; var varHtml =$('#'+varType+'Temp').render(jsonData[i]); if (varType!='hidden') { varTableHtml += "<td><label>" + jsonData[i].V_NAME + ":</label></td><td>" + varHtml + "</td>"; } else { varTableHtml += varHtml; } i++; } varTableHtml += "</tr>"; } varTableHtml += "</table>"; $('#' + v_form).html(varTableHtml); } var jsonData = { data : [ { V_TYPE : "date", V_KEY : "begin_date", V_NAME : "开始时间", V_DateFocus: "{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{$dp.$D(\\'end_date\\')}'}", }, { V_TYPE : "date", V_KEY : "end_date", V_NAME : "结束时间", V_DateFocus:"{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{\\'2099-12-31\\'}',minDate:'#F{$dp.$D(\\'begin_date\\')}'}", }, { V_TYPE : "select", V_KEY : "selectId", V_NAME : "测试单选", selectData : [ { S_KEY : "1", S_VALUE : "测试" }, { S_KEY : "2", S_VALUE : "测试2" }, { S_KEY : "3", S_VALUE : "测试3" } ] },{ V_TYPE : "text", V_KEY : "t_name", V_NAME : "测试中文" },{ V_TYPE : "hidden", V_KEY : "hiddenId", V_VALUE : "123" }] }; function closeWin() { var browserName = navigator.appName; if (browserName == "Netscape") { var opened = window.open('about:blank', '_self'); opened.opener = null; opened.close(); } else if (browserName == "Microsoft Internet Explorer") { window.opener = null; window.open('', '_self'); window.close(); } } $(function() { generateTableData(jsonData, "inputForm"); $('#sbtSpan').on('click',function() { var varForm = $('#inputForm').serialize(); console.log(varForm); }); $('#closeSpan').on('click',closeWin); }); </script> </head> <body> <div id="contentDiv"> <div id="titleDiv"> <label>名称:JsRender动态生成Input</label> </div> <div id="inputDiv"> <form method="post" action="#" id="inputForm"> </form> </div> <div id="submitDiv"> <span class="spanClass" id="sbtSpan">提交</span> <span class="banClass" /> <span class="spanClass" id="closeSpan">关闭</span> </div> </div> </body> </html>
运行结果为:
提交,结果为:
本文系原创,转载请注明出处,谢谢。
全文完。
相关推荐
JsRender.zip(jsrender.js和jsrender.min.js合集)
本人写的一个html页面,用js实现从数组读数据自动生成select控件
jsrender.js , jsrender.min.js下载
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
jquery 插件 高性能的js模板引擎
JsRender的应用,提供一个循环迭代的例子。
下一代js模板引擎jsRender的使用及扩展
jquery 插件 高性能的js模板引擎,jquery-jsrender.js
前端项目-jsrender,浏览器或node.js上的最佳模板(与Express 4、HAPI和browserify集成)
js select框美化用input文本框模拟select框美化特效,鼠标点击input框弹出选择二级菜单点击取值特效。
原生js简易提示框 input 点击文字消失
js 特效 html 特效 input框的隐藏显示
js随机生成32位字符串 包含大小写
js 特效 html 特效 Input框中的滚动信息
原生js form表单美化插件表单元素input select下拉框
本文是一篇JsRender的实用入门教程,实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下: 前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单...
js 特效 html 特效 input框中的一些技巧2
JsRender节点启动器 一个使用在 , 或直接在HTTP响应中在服务器上呈现模板化视图的Node.js应用程序。 此样本显示了JsRender Node集成的一些功能,并为使用模板化渲染的自己的Node项目提供了起点。 它还显示了如何...
Avatars是一款可以动态生成用户头像js插件。Avatars可以在浏览器或node.js环境中,动态生成各种漂亮的、基于svg的用户头像。