相信广大博友肯定碰到过一个编辑页面分了很多块的情况，智能表单插件已经为您支持了这种情况，

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

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>分组表单</title>

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

        <!--自定义站点样式-->

        <link rel="stylesheet" href="../css/site.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>与其他配置项一样样的，唯一的不同在于分组配置项为'组:配置项'的形式</h3>

            </div>

        </div>

        <script>

            $(function () {

                //注意,当配置为组表单时候配置项为json对象而非数组

                var eles={

                    '用户信息':[

                        [

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

                          {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:'text',name:'DisplayName',title:'显示名称:'}},

                       [

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

                        {ele:{type:'datetime',name:'ToDate',title:'~'}}

                       ]

                    ]

                };

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

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

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

            });

        </script>

    </body></html>

运行效果图：(当前配置项中配置了 用户信息和其他信息两块)

上一章：BootStrap 智能表单系列 二 BootStrap支持的类型简介

下一章：BootStrap 智能表单系列 四  表单布局介绍

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

BootStrap 智能表单系列 三 分块表单配置的介绍的更多相关文章

  1. Oracle将两张表的数据插入第三张表且第三张表中不存在

    1.由于是先查再插所以不能使用insert into table1() values(), 要使用insert into table1() select * table2,不能使用values. 2. ...

  2. 数据库分库分表(sharding)系列(三) 关于使用框架还是自主开发以及sharding实现层面的考量

    当团队对系统业务和数据库进行了细致的梳理,确定了切分方案后,接下来的问题就是如何去实现切分方案了,目前在sharding方面有不少的开源框架和产品可供参考,同时很多团队也会选择自主开发实现,而不管是选 ...

  3. 【CI】系列三.宿主机KVM配置及vdi与vmdk格式转换等

    前提:宿主机需要支持虚拟化,如果未打开,则需要重启机器,在bois中打开该项: Ubuntu 及 KVM 相关主要参考官方 https://wiki.ubuntu.com/kvm 另外也可参考该页面: ...

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

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

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

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

  6. BootStrap 智能表单系列 二 BootStrap支持的类型简介

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

  7. day03 mysql外键 表的三种关系 单表查询 navicat

    day03 mysql navicat   一.完整性约束之     外键 foreign key     一个表(关联表: 是从表)设置了外键字段的值, 对应的是另一个表的一条记录(被关联表: 是主 ...

  8. python 之 Django框架(orm单表查询、orm多表查询、聚合查询、分组查询、F查询、 Q查询、事务、Django ORM执行原生SQL)

    12.329 orm单表查询 import os if __name__ == '__main__': # 指定当前py脚本需要加载的Django项目配置信息 os.environ.setdefaul ...

  9. Hibernate第三天——表间关系与级联操作

    第三天,我们来使用Hibernate进行表之间一对多 多对多关系的操作: 这里我们先利用两个例子进行表关系的回顾: 一对多(重点): 例如分类和商品的关系,一个分类多个商品,一个商品属于一个分类 CR ...

随机推荐

  1. dllimport与dllexport作用与区别

    我相信写WIN32程序的人,做过DLL,都会很清楚__declspec(dllexport)的作用,它就是为了省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是C++的类的话 ...

  2. oracle导入导出exp,imp

    exp dadifilm/oracle@dg file=/tmp/dadi.dmp full=y imp u_data/321@dg1  file=/dadi_desc.dmp Import: Rel ...

  3. Python的中文编码转换问题

    与server进行数据交换时,尤其是数据中含有中文时,要注意中文的编码问题. 要选择server接受的编码方式,否则会造成显示乱码. 经验: 实验室server的数据库,中文用UTF-8编码,但我提交 ...

  4. IOS开发:xcode5版本引发的问题

    下面这段代码是用于处理ios7头部透明问题的 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000 if ( IOS7_OR_LATER ) { self.e ...

  5. 我的学习笔记之API-Guides翻译------AppComponent_Activites

    10.26第一天开始:贵在坚持,边看遍整理 一个应用程序通常由多个Activity组成,它们之间是松耦合的关系.特别的,有一个Activity作为app的主Activity,当app首次启动时呈现给用 ...

  6. linux grep 指定字符串的正则表达式

    cat all_uuid_log | grep "[a-z0-9]\{32\}"

  7. Hadoop学习之shuffle过程

    转自:http://langyu.iteye.com/blog/992916,多谢分享,学习Hadopp性能调优的可以多关注一下 Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方, ...

  8. Hibernate学习之常用方法比较

    一.save()和persist()方法 使用 save() 方法保存持久化对象时,该方法返回该持久化对象的标识属性值(即对应记录的主键值):但使用 persist() 方法来保存持久化对象时,该方法 ...

  9. 学习PS必须弄懂的专业术语

    在学习PS的过程中,我们经常会遇到一些专业术语,下面我们来对一些常用的.比较难理解的术语进行简单讲解. 像素:像素是构成图像的最基本元素,它实际上是一个个独立的小方格,每个像素都能记录它所在的位置和颜 ...

  10. 眼花缭乱的UI，蓝牙位于何方

    我们在前面已经分析了Android启动中涉及蓝牙的各个方面,今天我们着重来看看,在蓝牙打开之前,我们能看到的蓝牙UI有哪些,这些UI又是如何实现的. 1,settings中UI的分析 首先,最常见的也 ...