表单的布局分为自动布局和自定义布局两种：

自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格，通过设置autoLayout为true可以实现自动布局

自动以布局就是根据autoLayout来决定使用的栅格，通过设置autoLayout:'1,2,1,2,2,4' 表示 第一、二列占3格，第三列占6格子

自动布局代码如下所示(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-auto-layout.html)：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>自动布局</title>

        <link rel="stylesheet" href="../css/bootstrap.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>所谓的自动布局为:根据单个配置组的个数来自动使用不同的栅格，如：数组里面项数位2,则使用2，4，2，4布局</h3>

                <p>依赖于bootstrap个栅格样式,仅支持12整分的格式,如果你配置5项，是不支持的</p>

            </div>

        </div>

        <script>

            $(function () {

                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>

运行效果图：

可以看到我配置文件中第一、2项配了2列，第三项配置了3列，所以生成的div.form-group 第一项和第二项使用：2,4  第三项使用：1,3 从界面来看ui显示好不友好，所以autoLayout：true一般用于特殊场景及每一项都是相等的情况下使用。

自定义布局代码(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-fix-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>

                <p>如果你配置的autoLayout:1,2 将使用1,2栅格来显示</p>

                <p>如果你配置的autoLayout:1,2,2,4 第一个元素将使用1,2来布局，第二个将使用2,4来布局 如果没有2,4系统将会自动寻找1,2</p>

            </div>

        </div>

        <script>

            $(function () {

                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: '1,2,1,2' }).Render('formContainer');

            });

        </script>

    </body></html>

效果图如下：

note:如果页面有4列，但是配置的autoLayout不足的情况后面的部分将会使用前面的布局，即将第一列作为缺省的配置列

上一章：BootStrap 智能表单系列 三 分块表单配置的介绍

下一章：BootStrap 智能表单系列 五  表单依赖插件处理

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

BootStrap 智能表单系列 四 表单布局介绍的更多相关文章

  1. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  2. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  3. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  4. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  5. sql server 索引阐述系列四 表的B-Tree组织

    一.概述 说到B-tree组织,就是指索引,它可以提供了对数据的快速访问.索引使数据以一种特定的方式组织起来,使查询操作具有最佳性能.当数据表量变得越来越大,索引就变得十分明显,可以利用索引查找快速满 ...

  6. 数据库分库分表(sharding)系列(四) 多数据源的事务处理

    系统经sharding改造之后,原来单一的数据库会演变成多个数据库,如何确保多数据源同时操作的原子性和一致性是不得不考虑的一个问题.总体上看,目前对于一个分布式系统的事务处理有三种方式:分布式事务.基 ...

  7. ElasticSearch实战系列四: ElasticSearch理论知识介绍

    前言 在前几篇关于ElasticSearch的文章中,简单的讲了下有关ElasticSearch的一些使用,这篇文章讲一下有关 ElasticSearch的一些理论知识以及自己的一些见解. 虽然本人是 ...

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

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

  9. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

随机推荐

  1. ACM大数模板（支持正负整数）

    之前就保留过简陋的几个用外部数组变量实现的简单大数模板,也没有怎么用过,今天就想着整合封装一下,封装成C++的类,以后需要调用的时候也方便得多. 实现了基本的加减乘除和取模运算的操作符重载,大数除以大 ...

  2. Surface Pro 4 和 Surface Book 使用名为 Surface UEFI（统一可扩展固件接口）的新固件接口

    Surface Pro 4 和 Surface Book 使用名为 Surface UEFI(统一可扩展固件接口)的新固件接口.Surface UEFI 提供新功能,如启动更快速.安全性更高.可替换 ...

  3. php命名空间使用

    对于命名空间,官方文档已经说得很详细[查看],我在这里做了一下实践和总结. 命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只 ...

  4. 文件转换dll mingw

    MinGW:c -> o           gcc -c a.cc -> exe         gcc a.c libs.o -o a.exe (从主程序a.c,附加libs,生成a. ...

  5. C语言入门（2）——安装VS2013开发环境并编写第一个C语言程序

    在C语言入门系列中,我们使用Visual studio 2013 Professional作为开发工具.本篇详细介绍如何安装Visualstudio 2013 Professional并写出我们第一个 ...

  6. springMVC+spring+mybatis整合过程中遇到的问题

    今天在配置SSM整合的过程中遇到了几个错误,折腾了好久,具体如下 1.java.lang.IllegalArgumentException: Mapped Statements collection ...

  7. c# 搭建服务端 传输协议（2）

    在网络的数据传输中,要将需要传输的数据转换为二进制数据后传输,才能被服务端正常的接收,socket传输中,接收到的数据都会被放入byte[]中存放,所以在数据发送前,对二进制的数组进行有规律的排序,才 ...

  8. python开发的一些tips

    1. Notepad++编写python脚本 1)新建文件,编写代码 2)点击菜单栏,“语言”—>“P”—>“Python”,设置脚本为Python语言的高亮(这样保存文本的时候,Note ...

  9. [置顶] android利用jni调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so

    0:前言 1:本文主要作为丙方android公司的身份来写 2:作者有不对的地方,请指出,谢谢 ［第一篇:android利用jni调用第三方库——编写库libhello.so］ ［第二篇:androi ...

  10. Swift语言iOS8的蓝牙Bluetooth解析

    开发中央步骤: 1.添加CoreBluetooth.framework框架到你的工程 2.继承两个协议:CBCentralManagerDelegate和CBPeripheralDelegate 个人 ...