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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
js获取php变量的实现代码
Aug 10 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
Vue程序调试的方法
Jun 17 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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对象相互引用的内存溢出实例分析
2014/08/28 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
中学教师自我鉴定
2014/02/07 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
营业员岗位职责
2015/02/11 职场文书
婚宴新郎致辞
2015/07/28 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
python中如何对多变量连续赋值
2021/06/03 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis