本章介绍如何在生成表单后，将一个model的数据展示到form表单中(一般用于编辑页面)

代码如下(连接地址：https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html)：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>数据绑定</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <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 class="pull-right">

                        <button id="btnSubmit" class="btn btn-primary btn-xs">提交表单</button>

                    </div>

                </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 class="lead">表单数据绑定</h3>

                    <blockquote>

                        <p>将json格式的model绑定到表单中,此处使用模拟的model数据，实际环境中应该是与服务器交互取到数据，在配置对象的是需要一个回调方法，在回到方法里面可以做表单的一些其他操作，如添加表单验证、添加日期插件的支持====</p>

                        <p>note:复选框的数据源为数组形式</p>

                    </blockquote>

            </div>

        </div>

        <script>

            $(function () {

                var eles=[

                    [

                      {label:{text:'自定义用户名:'},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:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'显示名称:'}},

                           {ele:{type:'search',title:'产品',id:'ProductName'}}

                    ],

                    [

                        {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},

                        {ele:{type:'datetime',name:'ToDate',title:'~'}},

                    ]

                ];

                //隐藏表单元素主要用于编辑时候后台可以区别开来

                var hides = [{ id: 'primaryKey' }];

                var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){

                    var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'笔记本',FromeDate:'2015-06-10',ToDate:'2015-08-08'};

                    bf.InitFormData(model);

                });

                $("#btnSubmit").bind('click',function () {

                    var postData=bsForm.GetFormData();

                    alert("获取到的表达数据为:"+JSON.stringify(postData));

                })

            });

        </script>

    </body></html>

此处使用js创建了一个json类型的model，实际开发情况下 会跟服务器交互得到一个model，通过表单插件的InitFormData方法将model显示到form表单中

效果图如下：

定义的数据成功显示到表单中，

note:针对复选框多选的情况下，需要返回的是一个数组

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

下一章：BootStrap 智能表单系列 七 验证的支持

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

BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)的更多相关文章

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

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

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

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

  3. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

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

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

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

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

  6. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  7. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

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

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

  9. Auth主件的(RBAC) 六表

    1.RBAC 和Auth的区别 基于RBAC一般Djagno 会用 和Auth 相对来说高级一点 2.RBAC( role Based Accsess Control)的六表之间的数据传输 2.1 D ...

随机推荐

  1. hacker入门篇——相关书籍

    1.<黑客大曝光:网络安全机密与解决方案(第7版)> 简介:这是一本老外写的书,比较适合入门看,内容包括一些基本的攻防流程,基本工具软件,网络安全的一些基本概念等,对整个网络安全和黑客入侵 ...

  2. 限制**类型物料不能输入BOM

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

  3. 在Centos 5.x或6.x上安装RHEL EPEL Repo

    本文介绍了如何在CentOS 5.x或者CentOS 6.x的系统上使用Fedora Epel repos一个第三方repo:remi资源库.这些资源包并不是天然地支持CentOS,但是提供了很多流行 ...

  4. padding-top、margin-top和top的区别

    padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的: margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包含在容器内: top: ...

  5. openNebula libvirt-virsh attach disk device for kvm

    1,新建文件硬盘 qemu-img create -f qcow2 testdisk.img 2G

  6. AndroidContentProvider ContentResolver和ContentObserver的使用

    1.ContentProvider.ContentResolver和ContentObserver ContentProvider是Android的四大组件之一,可见它在Android中 的作用非同小 ...

  7. history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）

    示例: http://browserstate.github.io/history.js/demo/     简介   HTML4有一些对浏览历史的前进后退API的支持如:   window.hist ...

  8. Hibernate session.saveOrUpdate()方法

    saveOrUpdate()方法同时包含了save()与update()方法的功能, 如果传入的参数是临时对象,就调用save()方法: 如果传入的参数是游离对象,就调用update()方法: 如果传 ...

  9. SDOI2008 Sandy的卡片( 后缀数组 )

    求出后缀数组, 然后二分答案, 对height数组分组检验答案. 时间复杂度O(|S| log|S|) ------------------------------------------------ ...

  10. AOP 切面编程

    简介 如果你很熟悉面向方面编程(AOP),你就会知道给代码增加“切面”可以使代码更清晰并且具有可维护性.但是AOP通常都依赖于第三方类库或者硬编码的.net特性来工作.虽然这些实现方式的好处大于它们的 ...