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

代码如下(链接地址：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. MDX笔记

    为啥要写这一篇博客:之前断断续续的学习过MDX,也大致学会了基本语法,理解了基本用法,但是用的机会不多,到了真正用的时候,无从下手,十分尴尬!故此,将语法和基本用法温故总结,结合实例将MDX做个阶段性 ...

  2. Autoconf/Automake工具简介

    在linux下编程的时候,有时候工程项目很大,文件比较多,此时需要使用自动创建Makefile文件功能.也就是使用Autoconf/Automake工具自动生成Makefile,为编译程序带来了方便, ...

  3. 解决android开发webservice的发布与数据库连接的问题

    由于app后续开发的需要,移植了两次webservice和数据库,遇到了不少问题,也花费了很多时间,实践告诉我要学会寻找问题的根源,这样才能在开发中节省时间,尽快解决问题!好,废话不多说,转入正题…… ...

  4. 清风注解-Swift程序设计语言:Point1～5

    目录索引 清风注解-Swift程序设计语言 Point 1. Swift 风格的"Hello, world" 代码事例: println("Hello, world&qu ...

  5. linux 磁盘空间扩容 vg(+pv) lv(+空间) lv(缩减磁盘空间)

    preFace APP scenario description: 当你未能合理的规划存储时,在后期的维护工作中可能会涉及的存储的 再规划(eg,某一个 or 数个App 对某一个lv 即挂载点写Bi ...

  6. spring bean之间的关系：继承；依赖

    概要: ' 继承Bean配置 Spring同意继承bean的配置,被继承的bean称为父bean,继承这个父Bean的Bean称为子Bean 子Bean从父Bean中继承配置,包含Bean的属性配置 ...

  7. oracle 快照（snapshot） 管理

     ----手工创建oracle 快照 BEGIN DBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT (); END; / ---删除快照 详细快照信息能够查看视图 ...

  8. Request.ServerVariables完整参考

    Request.ServerVariables("Url") 返回服务器地址 Request.ServerVariables("Path_Info") 客户端提 ...

  9. ASP.NET导出EXCEl方法使用EXCEl对象

    导出功能必须使用  office中EXCEl对象,整个操作如同在操作EXCEl一样,建立EXCEl应用----建立工作簿---建立sheet表单页, 代码实现过程中,如果想对单元格实现一些操作,或者汇 ...

  10. JavaScript引用类型之Array数组的拼接方法-concat()和截取方法-slice()

    1.concat()   基于当前数组中的所有项创建一个新数组(也就是副本),然后将接收到的参数添加到副本的末尾,最后返回新构建的数组.也就是说,concat()在向数组中追加元素时,不会改变原有数组 ...