脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 智能表单 表单编辑数据绑定

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

 更新时间：2016年06月13日 14:43:07   作者：程序有Bug  
这篇文章主要介绍了BootStrap智能表单实战系列(六)表单编辑页面的数据绑定的相关资料,一般用于编辑页面，本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下

什么是 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表单中

效果图如下：


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

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

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

您可能感兴趣的文章:

相关文章

  • JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    这篇文章主要介绍了JavaScript实现的仿新浪微博原生态输入字数即时检查功能,涉及javascript事件响应及字符串的遍历、转换、判断等相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • 详解JavaScript (!!) 中的双感叹号是干什么用的

    详解JavaScript (!!) 中的双感叹号是干什么用的

    JavaScript 不是静态语言，而是动态语言，这意味着变量可以引用或保存任何类型的值，此外，该类型可以随时更改，这篇文章主要介绍了JavaScript (!!) 中的双感叹号作用,需要的朋友可以参考下
    2022-09-09
  • JS利用时间戳倒计时的实现示例

    JS利用时间戳倒计时的实现示例

    这篇文章主要介绍了JS利用时间戳倒计时的实现示例,本文将提供代码示例和详细的步骤,帮助你实现一个简单而实用的时间戳倒计时,感兴趣的可以了解一下
    2023-12-12
  • JS获取经纬度并根据经纬度得到城市信息简单示例

    JS获取经纬度并根据经纬度得到城市信息简单示例

    前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下
    2023-11-11
  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作响应式导航条时，dropdown组件用的比较多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去（hover）就展开则会省去点击时间，这样能提高效率，下面小编给大家解答下实现思路
    2016-08-08
  • javaScript合并对象的几个常见方式

    javaScript合并对象的几个常见方式

    JavaScirpt中有很多对象合并的方法,今天就做个笔记,记录一下这些方法,下面这篇文章主要介绍了javaScript合并对象的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • js算法实例之字母大小写转换

    js算法实例之字母大小写转换

    实现javascript 英文首字母大写有多种方法,下面这篇文章主要给大家介绍了关于js算法实例之字母大小写转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript实现导入导出excel的示例代码

    JavaScript实现导入导出excel的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript语言实现导入导出excel文件的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2022-07-07
  • 详解webpack与SPA实践之开发环境搭建

    详解webpack与SPA实践之开发环境搭建

    这篇文章主要介绍了详解webpack与SPA实践之开发环境搭建,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript中的object转换函数toString()与valueOf()介绍

    JavaScript中的object转换函数toString()与valueOf()介绍

    这篇文章主要介绍了JavaScript中的object转换函数toString()与valueOf()介绍,需要的朋友可以参考下
    2014-12-12

最新评论