BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap 包的内容
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面)
代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!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智能表单实战系列(六)表单编辑页面的数据绑定的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!