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

代码如下(链接地址：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. 配件BOM定义限制（只定义配件的）

    应用 Oracle Bill Of   Materiel 层 Level Function 函数名 Funcgtion Name BOM_BOMFDBOM 表单名 Form Name BOMFDBOM ...

  2. Windows 7的系统还原，你用了吗？

    在Windows XP时代可能人们最常用的系统还原工具就是Ghost,一来因为Ghost的还原非常彻底,二来由于备份Windows XP所占用的硬盘空间并不是很大,所以习惯于安装完操作系统以后就把系统 ...

  3. QCA4002/QCA4004 为主流家电和消费电子产品推出低功耗Wi-Fi平台

    美国高通公司日前宣布,其子公司高通创锐讯推出全新芯片系列,这是低功耗Wi-Fi解决方案系列的一部分,可连接组成物联网的各种设备.QCA4002和QCA4004网络平台在芯片上纳入IP堆栈及完整的网络服 ...

  4. vs指定QT的工作目录（其它项目也是如此）

    当一个工程依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库.解决方法: 项目->属性->调试: 工作目录:指定程序运行时的目录 环境:指定程序运行时的环境变量 我们可以在环境变 ...

  5. 2016 Multi-University Training Contest 1 总结

    算是组队后第一次打比赛吧. 09题开始就有人过了,看到题目,这不是轮廓线DP的裸题么?!!,一发WA告终,然后发现题目是有改动的.还是太心急了. 然后我读了第一题,是最小生成树求期望距离,我把题意说了 ...

  6. The Water Problem(排序)

    The Water Problem Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  7. NYOJ-252 01串

    01串 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这样的长 ...

  8. C++中顶层const和底层const

    1. 顶层 const 与底层 const 概念 指针本身是一个对象,由于,指针实际相应着内存单元的一段存储空间,然而,指针所指向的也是一个数据对象,因此,指针是一个常量与指针所指向的是一个常量是两个 ...

  9. js实现页面时钟

    <body onload="setInterval(nowtime,1000)">    <form id="main" method=&qu ...

  10. NGINX 多个域名配置

    多个域名配置: 依赖于 include  这个功能会加在 这2个文件夹下的所有配置文件. 所以我们可以配置多个   conf  放置于这些文件夹中.这样就是先了多个域名配置 conf 内容大致如下 s ...