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

代码如下(链接地址：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. vs2013 MVC 无法确定要使用哪一版本的 ASP.NET Web Pages错误

    在web.config文件<configuration>节点下添加 <appSettings>     <add key="webPages:Version&q ...

  2. 玉兔IM（康林的博客）

    玉兔即时通信 作者:康林(msn.email:kl222@126.com:QQ:16614119) 博客:http://blog.csdn.net/kl222http://blog.csdn.net/ ...

  3. Unix/Linux环境C编程入门教程(3) Oracle Linux 环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 2010年9月,Oracle Enterprise Linux发布新版内核--Un ...

  4. 今天起改用mac的marsedit写博

    最近一直使用mac来工作,所以写博也相应改为marsedit. 初步感觉还是不错的,越来越发现mac其实也适合在工作中使用,生活上当然不在话下. 从高富帅的x220t变成屌丝的macbook小白(升级 ...

  5. 「深入理解计算系统」从Hello World开始

    从 hello world 开始 Table of Contents 1 程序源文件 2 程序源文件是什么 3 程序被编译 4 程序运行 4.1 读取命令 4.2 读取指令内容 4.3 执行过程 5 ...

  6. web - 块元素和内嵌元素的特征

    块: 1.独占一行 2.支持所有的样式 3.不设置宽度的时候,宽度撑满整行 常用的快标签有: div,section,header,nav,footer,article,aside,ul,ol,li, ...

  7. JavaScript之面向对象学习四原型对象的动态性

    1.由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来---即便是先创建了实例后修改原型也是如此.代码如下: function Person(){ } va ...

  8. 微软URLRewriter.dll的url重写在.net简单使用

    最近在做一个cms的网站 打算做成伪静态,从博客园上差了很多人的资料,终于实验成功了,原理就不讲了,附上在本地的配置,IIS的配置遇到后在发布. 文章最后附上源码 步骤如下 1.新建网站,添加URLR ...

  9. 关于cell中添加子视图 复用重叠问题的解决方法

    问题本质:   因为你要添加的子视图并不是在自定义的cell中实现的,而是根据系统给的UITableViewCell这个类创建的实例,每次进图 cellForRow方法都会创建一个cell,每次都要创 ...

  10. LitJson解析遇到的坑

    今天在些项目的时候,遇到一个坑,现在跟大家分享一下 我遇到的错误是MissingMethodException: Method not found: 'Default constructor not ...