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

本章介绍如何在生成表单后，将一个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 智能表单系列六表单数据绑定(编辑页面的数据绑定)的更多相关文章

BootStrap 智能表单系列五表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
BootStrap 智能表单系列九表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
BootStrap 智能表单系列四表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局自动以布局就是 ...
BootStrap 智能表单系列八表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...
BootStrap 智能表单系列首页 (持续更新中...)
背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可使用中发现还是蛮实用的,于是开源出来 ...
BootStrap 智能表单系列七验证的支持
但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性该插件也为您支持到 ...
BootStrap 智能表单系列十自动完成组件的支持
web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说输入产品编号,需 ...
BootStrap 智能表单系列三分块表单配置的介绍
相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
Auth主件的(RBAC) 六表
1.RBAC 和Auth的区别基于RBAC一般Djagno 会用和Auth 相对来说高级一点 2.RBAC( role Based Accsess Control)的六表之间的数据传输 2.1 D ...

随机推荐

ubuntu下编译内核驱动。
目的: 1. 驱动热身.网上有很多类似的文章可供参考. 2. 在操作系统中, 编写这个设备的驱动. 3. 为写qemu的watchdog驱动练手. 有朋友问make的 watchdog驱动需要什么准 ...
[虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设（一）
目的: 结合现在比较流行的技术,通过一个demo 展示一个全栈式设计的各种技能. 一个全栈式的工程师,应该能设计通过verilog/VHDL做logical设计.能写内核驱动,能架站. 要熟悉veri ...
libVirt APIs uris (storage,hypervisors)drivers terminologies,glossary xml VMI format
Linux下的经常使用性能查询命令top、vmstat、gprof、pidstat之对照
(1)查看各个CPU核的使用情况 sudo top -d 1 进入之后,按1,会出现以下的CPU使用情况,当中us列反映了各个CPU核的使用情况,百分比大说明该核在进行紧张的任务. (2)查看哪个进程 ...
Android Resource介绍和使用
1. 相关文件夹介绍文件取值方式 string.xml getResource().getString(resourceId)或者getResource().getText(resourceId) ...
asp.net Listbox控件用法
2008-02-18 19:56 来源: 作者: ListBox(列表框)控件可以显示一组项目的列表,用户可以根据需要从中选择一个或多个选项.列表框可以为用户提供所有选项的列表.虽然也可设置列表框为多 ...
spring mvc框架遇到的问题
web.xml配置文件代码: <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
spring schema自定义
今天看了一下分布式服务框架的那本书,于是里面提到了spring schema的自定义,于是去简单的了解了一下参考资源:spring schema扩展: http://www.yihaomen.com ...
hdu3507
题意: 给n(n<=10^6)个非负数字,放在一个数组num中,再给一个特殊值m.求将这个数组分成任意多个区间,每个区间[a,b]的值定义为( sigma(num[i] | (a<=i&l ...
Labview学习之程序Web发布
Labview学习之程序Web发布 1. LabVIEW Web服务器在LabVIEW开发环境中,自身带了一个已连接好的Web服务器.LabVIEW Web服务器除了与其他Web服务器一样能 ...

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

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

随机推荐

热门专题

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

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