脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中with语句的理解

    深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式。这篇文章主要介绍了JavaScript中with语句的相关知识，感兴趣的朋友一起学习吧
    2016-05-05
  • js图片下载方式集合(附详细代码)

    js图片下载方式集合(附详细代码)

    关于图片下载问题,不同的浏览器,需要兼容的下载方式,这篇文章主要给大家介绍了关于js图片下载方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 推荐几个不错的console调试技巧实现

    推荐几个不错的console调试技巧实现

    这篇文章主要介绍了推荐几个不错的console调试技巧实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JavaScript+html实现前端页面随机二维码验证

    JavaScript+html实现前端页面随机二维码验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面随机二维码验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript中常见的数据类型判断方法小结

    JavaScript中常见的数据类型判断方法小结

    在 JS 编程中,正确判断数据类型是必备技能,也是面试常问的内，本文将探讨四种常用的数据类型判断方法，通过了解它们的特点和适用范围,能够更好地处理不同数据类型的情况,避免出现错误和提升代码质量,需要的朋友可以参考下
    2023-06-06
  • webpack file-loader和url-loader的区别

    webpack file-loader和url-loader的区别

    这篇文章主要介绍了webpack file-loader和url-loader的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    JS禁用页面上所有控件的实现方法(附demo源码下载)

    这篇文章主要介绍了JS禁用页面上所有控件的方法,涉及JavaScript捕捉页面元素的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • javascript实现炫酷的拖动分页

    javascript实现炫酷的拖动分页

    非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。
    2015-05-05
  • antd table长表格出现滚动条的操作方法

    antd table长表格出现滚动条的操作方法

    这篇文章主要介绍了antd table长表格如何出现滚动条,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 使用AOP改善javascript代码

    使用AOP改善javascript代码

    这篇文章主要介绍了使用AOP改善javascript代码,需要的朋友可以参考下
    2015-05-05

最新评论