代码如下(链接地址：https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>基础配置</title>
  7.         <link rel="stylesheet" href="../css/bootstrap.css">
  8.         <script src="../lib/jquery.js"></script>
  9.         <script src="../lib/bootstrap.js"></script>
  10.         <!--工具方法-->
  11.         <script src="../scripts/global.js"></script>
  12.         <!--插件-->
  13.         <script src="../scripts/plugin.js"></script>
  14.     </head>
  15.  
  16.     <body>
  17.         <div class="panel panel-default">
  18.             <div class="panel-heading"><label>基础配置</label></div>
  19.             <div class="panel-body">
  20.                 <form action="#" id="formContainer" class="form form-horizontal"></form>
  21.             </div>
  22.         </div>
  23.         <div class="panel panel-default">
  24.             <div class="panel-heading"><label>介绍</label></div>
  25.             <div class="panel-body">
  26.                 <h3>支持的表单元素包括:text、select、radio、checkbox、datetime、search、textarea、自定义</h3>
  27.             </div>
  28.         </div>
  29.         <script>
  30.             $(function () {
  31.                 var eles=[
  32.                         {ele:{type:'text',name:'UserName',title:'用户名:'}},
  33.                         [
  34.                             {ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},
  35.                             {ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},
  36.                         ],
  37.                         {ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},
  38.                         {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},
  39.                         {ele:{type:'search',name:'selectName',title:'选择:'}},
  40.                         {ele:{type:'textarea',name:'address',title:'地址:'}},
  41.                         {ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'叉前面:'}},
  42.                         {ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'叉后面:'}},
  43.                         {ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'前后皆叉:'}},
  44.                 ];
  45.                 //隐藏表单元素主要用于编辑时候后台可以区别开来
  46.                 var hides = [{ id: 'GUID' }];
  47.  
  48.                 var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');
  49.             });
  50.         </script>
  51.     </body></html>

主要是下面的js那一块，通过该段js生成form表单

运行效果图：

得到如图所示的结果

上一章：BootStrap智能表单系列 一 Demo示例

下一章：BootStrap 智能表单系列 三 分块表单配置的介绍

本系列首页：BootStrap 智能表单系列 首页 (已完结)

BootStrap 智能表单系列 二 BootStrap支持的类型简介的更多相关文章

  1. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  2. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  3. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  4. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

  5. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  6. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  7. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  8. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  9. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

随机推荐

  1. odi增量更新策略

    增量更新策略:通过一个“update key”比较流数据记录与目标表中的记录比较进行数据整合.具有相同“update key”的记录当相关联列不同时将被更新:在目标表中不存在的记录将被插入.这种方式用 ...

  2. 退货行RMA编号改为必输选项

    应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name RCV_RCVTXERE 表单名 Form Name RCVTXERE 说明 Descr ...

  3. 如何自定义Intent.createChooser的显示结果

    Intent是android核心的概念之一,Intent为android系统提供了真正的开放.android的姿态是开放了,但却没有做到位. 拿“发邮件”这一功能来说,为了使用Intent机制来发送邮 ...

  4. 布线问题(prime)

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  5. uva 301 Transportation 铁路公司的阳谋 纯dfs暴力

    题目比较难理解. 给出铁路的容量和站点数,以及几笔订单,要求算出如何盈利最大. 咋一看想贪心,但无法确定是最优解啊. 于是用dfs做,就两种状况,选与不选,先开一个每个站点的当前人数数组,假设要选,然 ...

  6. 自己定义View常处理的回调函数

    onFinishInflate() 当View中全部的子控件均被映射成xml后触发 onMeasure(int, int) 确定全部子元素的大小 onLayout(boolean, int, int, ...

  7. Nginx+Tomcat7+Mencached负载均衡集群部署笔记

    Nginx+Tomcat+Memcached负载均衡集群服务搭建 操作系统:CentOS6.5 本文档主要解说,怎样在CentOS6.5下搭建Nginx+Tomcat+Memcached负载均衡集群s ...

  8. xcode UIImage图片拉伸

    图片拉伸 +(UIImage*)wlisWithImage:(NSString *)name{ //获取图片 UIImage * img=[UIImage imageNamed:name]; //获取 ...

  9. ASP.NET实现列表页连接查询 拼接sql语句 绑定grivdView

    ASP.NET实现列表页连接查询 拼接sql语句 如图效果: 基本需求:1.当页面第一次加载的时候默认查询一个月时间(或者说是登陆者所属权限的所有数据)的数据绑定到gridView 2.添加查询条件时 ...

  10. Javascript 获取窗口的大小和位置

    在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分).对于IE6 及 ...