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

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>基础配置</title>

        <link rel="stylesheet" href="../css/bootstrap.css">

        <script src="../lib/jquery.js"></script>

        <script src="../lib/bootstrap.js"></script>

        <!--工具方法-->

        <script src="../scripts/global.js"></script>

        <!--插件-->

        <script src="../scripts/plugin.js"></script>

    </head>

    <body>

        <div class="panel panel-default">

            <div class="panel-heading"><label>基础配置</label></div>

            <div class="panel-body">

                <form action="#" id="formContainer" class="form form-horizontal"></form>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading"><label>介绍</label></div>

            <div class="panel-body">

                <h3>支持的表单元素包括:text、select、radio、checkbox、datetime、search、textarea、自定义</h3>

            </div>

        </div>

        <script>

            $(function () {

                var eles=[

                        {ele:{type:'text',name:'UserName',title:'用户名:'}},

                        [

                            {ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},

                            {ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},

                        ],

                        {ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},

                        {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},

                        {ele:{type:'search',name:'selectName',title:'选择:'}},

                        {ele:{type:'textarea',name:'address',title:'地址:'}},

                        {ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'叉前面:'}},

                        {ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'叉后面:'}},

                        {ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'前后皆叉:'}},

                ];

                //隐藏表单元素主要用于编辑时候后台可以区别开来

                var hides = [{ id: 'GUID' }];

                var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');

            });

        </script>

    </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. Ubuntu安装JDK(tar.gz)

    如果没有创建root用户: sudo passwd root 在oracle官网下载jdk(百度"JDK")的tar.gz包: jdk-7u55-linux-x64.gz 这是我下 ...

  2. ADB几种常见的错误及解决方法

    下面列举出几种常见的错误及解决方法. Q1:无效的安装包,安装包已损坏[INSTALL_FAILED_INVALID_APK] A1:请检查安装包是否完整.如果是xpk包,可以通过 手动安装xpk来检 ...

  3. JSP、JSTL、EL

    Jsp Jsp内置对象: Response.Request.Page.pageContext.session.out.application.exception.config Out->jspW ...

  4. C#DataTable DataSet DataRow区别详解

    DataSet 是C#中用来存储数据库数据的.其实,它的作用是在内存中模拟数据库.我们现实生活中的数据库从大到小的基本结构类似于:数据库实例,表,列,行.在C#语言中,我们在内存中也模拟出了一个这样的 ...

  5. ASP.NET导出EXCEl方法使用COM.EXCEL不使用EXCEl对象

    第一种:导出gridVIEW中的数据,用hansTABLE做离线表,将数据库中指定表中的所有数据按GRIDVIEW中绑定的ID导出 只能导出数据不能去操作相应的EXCEl表格,不能对EXCEL中的数据 ...

  6. JS学习笔记（一）基本数据类型和对象类型

    js是一种弱类型的语言,所有的变量都用var进行声明,字符串用双引号或单引号括起来,常见基本数据类型为number,string,boolean等.如 var num = 123;或var num = ...

  7. 关于HTTP 协议的特点，以及网络请求GET 和 POST 的区别?

    HTTP协议有何特点: HTTP 超文本的传输协议,是短连接,是客户端主动发送请求,服务器做出响应,服务器响应之后连接断开 HTTP是属于应用层面向对象的协议,HTTP 有2类报文:请求报文和响应报文 ...

  8. Android基础知识巩固：关于PendingIntent和广播

    平时使用广播的场合比较多,但细节的东西,看过了也没有总结,以至于某些场合有小问题,还是要把原理和属性搞清楚才能运用自如. 其实也是自己比较懒,先看别人的blog,有个概念再去官网看英文的能好理解一些. ...

  9. c++实现单例

    单例宏: //单件定义宏 //------------------------------------- // 在头文件中申明 // DECLARE_SINGLEOBJ( CSampleClass ) ...

  10. shell中常用的特殊字符

    (1) * 代表0到无穷个任意字符 (2)?代表任意一个字符 (3)代表括号内任意一个字符 (4)[ - ] 代表一个范围中的任意一个字符 如[0-9] 即是代表0-9之间的一个数 (5)[^] 反向 ...