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


Posted in Javascript onJune 13, 2016

什么是 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):

<!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表单中

效果图如下:

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

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

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

以上所述是小编给大家介绍的BootStrap智能表单实战系列(六)表单编辑页面的数据绑定的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
Angular简单验证功能示例
Dec 22 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 #Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 #Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 #Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
BootStrap智能表单demo示例详解
Jun 13 #Javascript
You might like
PHP 危险函数全解析
2009/09/09 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python绘制趋势图的示例
2020/09/17 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
重阳节活动总结
2014/08/27 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
python基础之停用词过滤详解
2021/04/21 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python