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 select(列表)的操作(取值/赋值)
Mar 16 Javascript
js动态设置div的值下例子
Oct 29 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 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学习之 数组声明
2011/06/09 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python在不同层级目录import模块的方法
2016/01/31 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
实习评语
2013/12/16 职场文书
演讲稿开场白
2014/01/13 职场文书
优秀纪检干部材料
2014/08/27 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫