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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP7新功能总结
2019/04/14 PHP
jquery 使用简明教程
2014/03/05 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
遗传算法之Python实现代码
2017/10/10 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python正则-re的用法详解
2019/07/28 Python
python 字典的打印实现
2019/09/26 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pytorch 常用线性函数详解
2020/01/15 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
测试工程师岗位职责
2013/11/28 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
领导党性分析材料
2014/02/15 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
三严三实学习心得体会
2014/10/13 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python