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

代码如下(链接地址：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. 15.java.lang.InstantiationException

    java.lang.InstantiationException 实例化异常 当试图通过Class的newInstance()方法创建某个类的实例,但程序无法通过该构造器来创建该对象时引发 Class ...

  2. Javascript面向对象之创建对象

    面向对象的语言具有一个共同的标志,那就是具有“类”的概念,但是在javascript中没有类的概念,在js中将对象定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”,即其将对象看作是一组名值 ...

  3. 几家SIEM

    HP Arcsight Imperva is a HP Business Partner. HP is the world's largest IT company, providing infras ...

  4. 【Win7激活工具2013版下载】适用于旗舰版、家庭高级版等所有版本32/64位 OEM激活

    虽然现在Win8已经发布了,但是身边总是还有一些朋友在用着Win7系统,而近期微软频繁的推送补丁包,导致之前的那些激活都失效了.找了网络上很多工具,之前的那些有的已经不能用了,激活不了,今天就推荐一些 ...

  5. Delphi Socket Demo

    Delphi Socket Demo 转自  http://www.anqn.com/dev/delphi/2010-01-07/a09122531-1.shtml   自己对中间有点修改,下面是代码 ...

  6. 07.19 Linux命令 cd

    情景:在用compass编写sass,cd进入目录后,想退出, 解决: cd.. 回到上一层目录 cd\ 回到根目录 cd 进入具体目录

  7. iOS禁用部分文件ARC

    TARGETS的build Phases中的Compile Source里修改文件备注文件参数设定: 增加-fobjc-arc来使单个文件 支持ARC,或者添加-fno-objc-arc使单个文件不支 ...

  8. UVa 10330 - Power Transmission(最大流--拆点)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  9. cmd命令 拷贝某文件夹及其子文件夹文件到其它文件夹

    @ECHO OFF cd/d %H:\FileLoc\CNET&cd.. ::echo 拷贝"%H:\FileLoc\CNET"中文件到"H:\FileLocTe ...

  10. 走进小作坊（十一）----移动web实现指南

    四.五年前智能手机行业刚刚兴起,差别于之前功能机阉割版的web开发方式,一些学者就開始探索移动web的UI方向了.从PC迁移到移动端的web设计现成可用的原则有,很多其它的则是依据移动端独有特点进行探 ...