javascript
定义图标
提示
默认消息
字段验证
手动验证
重设
提交按钮是否可提交
提交
tab *** 作
opyright © 1999-2020, CSDNNET, All Rights Reserved
打开APP
Bootstrap—table控件的传参取值 原创
2017-05-05 00:02:08
奔跑的大白啊
码龄8年
关注
前言
最近小编接触的项目中，统一采用扁平化的流行风格，前台使用的Bootstrap框架，相对于EasyUI绑定数据的时候有点复杂，在Table控件传值的时候就卡住了，Bootstrap第一次了解，总结一下它的使用套路。
需求描述
查询一段时间间隔内的数据，需要获取页面上两个日期控件上的日期值传递到Controller的方法中做进一步的逻辑处理。
代码详解
1 在cshtml页面引用相关组件，并定义一个空的表格
@bootstrap table组件以及中文包的引用@
<script src="~/Content/bootstrap-table/bootstrap-tablejs"></script>
<link href="~/Content/bootstrap-table/bootstrap-tablecss" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CNjs"></script>
@定义一个空的table@
<table id="table"></table>
2 Js初始化
$(function () {
//初始化Table
var oTable = new TableInit();
oTableInit();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInitInit = function () {
$('#table')bootstrapTable({
url: '/ConfluenceSurvey/Query', //请求后台的URL（）
method: 'get', //请求方式（）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
pagination: true, //是否显示分页（）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInitqueryParams,//传递参数（）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'date',
title: '日期'
}, {
field: 'daycoin',
title: '每日小计'
}, {
field: 'totalcoin',
title: '到此日的积分'
} ]
});
};
//得到查询的参数
oTableInitqueryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: paramslimit, //页面大小
offset: paramsoffset, //页码
startdate: $("#startdate")val(),
enddate: $("#enddate")val()
};
return temp;
};
return oTableInit;
};
注：初始化Table必须的几个参数小编用（）做了标记。
3 在Controller中对应的方法
按照正常的方法传参接收就可以了，此处代码省略
4 效果
重点突破-传参取值
1Table组件中定义传参属性
queryParams: oTableInitqueryParams,//传递参数（）
2 定义具体传参方法
//得到查询的参数
oTableInitqueryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: paramslimit, //页面大小
offset: paramsoffset, //页码
startdate: $("#startdate")val(),
enddate: $("#enddate")val()
};
return temp;
};
return oTableInit;
};
总结
不怕不知道，就怕不知道，有需求就一定可以实现。
打开CSDN，阅读体验更佳
最新发布 bootstrapTable传参示例
bootstrapTable传参示例
继续访问
bootstrap table配置参数例子
主要为大家详细介绍了bootstrapTable的参数设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap initTable参数传递
queryParams: function (params) { var searchParams = $('#searchForm')getValues(); var temp = { paraId: arr['id'], paraLB: arr['leibie'] ,
继续访问
Bootstrap-table 查询时通过Post请求传入复杂类型参数到后台控制器
Bootstrap-table默认的传参 Bootstrap-table每次刷新或者排序都会自动向设置好的url发送一个请求，请求中包含4个默认的参数 当data-query-params-type属性设置成limit时（默认情况） 四个参数为：limit,offset,sort,order 当data-query-params-type为空时 四个参数为：pageSize,pa
继续访问
bootstrap-table 获取所有数据_Bootstrap table教程
Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应 *** 作的功能快速上手 对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查 *** 作,以及增加 *** 作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一
继续访问
Bootstrap-Table实现自定义条件查询
鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现，今天特在此说明。首先展示一下效果： 默认查询 条件查询 测试数据 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <
继续访问
BootStrap table 传递搜索参数
转载自：>
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
采用bootstrap框架来实现表单验证的优势有以下两点：
一、它使用起来很方便。
二、非常便于阅读，使代码更容易理解。
下面我们通过一个使用Bootstrap框架的表单验证示例来说明具体是如何实现的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Forms: Bootstrap Validation Module</title>
<link href="/css/bootstrapmincss" rel="stylesheet" media="screen">
<style>
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - bootstrap 验证 模块</span></h1>
</article>
<div id="result-stub" class="well hidden">
//设置好Input元素要满足的验证条件
<form id="email-form">
<input type="text"
id="username" name="username"
pattern="[a-zA-Z ]{5,}"
placeholder="用户名"
maxlength="30"
required
data-role="validate"
title="用户名"
data-content="用户名是必填的，支持一连串字母和数字组合" /><br />
<input type="email"
id="email" name="email"
data-role="validate"
placeholder="Email" required
title="Email"
data-content="email地址为必填" /><br />
<button type="button"
class="btn"
data-role="trigger-validation">验证</button>
</form>
<div id="msg"></div>
</div>
<script >
windowonload = function() {
//ValidationUtility函数主要是封装表单验证的逻辑，用来处理表单验证。
var ValidationUtility = function() {
var
elements = $('[data-role="validate"]'),//获取需要验证的元素对象
elementCount = 0;//。它来控制对话框的显示个数
//Popover是Bootstrap的d出提示控件，这个提示控件并不会直接显示出来。它需要调用特定的方法才会显示出来。
elementspopover({
placement: 'top'
});
//这里通过jQuery的on方法来设置验证失败处理事件，这里传入参数invalid，它表示验证失败事件。
//当验证失败且elementCoun变量为0时，该函数就会通过id选择器选择验证失败的input元素对象调用popover（show）方法，通过该方法设置提示信息对话框为显示状态。然后通过elementCount++来使变量elementCount自增加数值1 所以当两个input元素都验证失败时，只会显示第一个input元素验证失败的提示信息。
elementson('invalid', function() {
if (elementCount === 0) {
$('#' + thisid)popover('show');
elementCount++;
}
});
//输入框失去焦点时隐藏提示控件
elementson('blur', function() {
$(this)popover('hide');
});
//validate函数，该函数功能是使表单进行表单验证。当这个函数被调用时，elementCount变量会被重新赋值为0。
var validate = function(formSelector) {
elementCount = 0;
//给传入的表单参数前面加上#，使其变成ID选择器
if (formSelectorindexOf('#') === -1) {
formSelector = '#' + formSelector;
}
//对表单进行验证并返回结果
return $(formSelector)[0 ]checkValidity();
};
//ValidationUtility 函数是采用的Revealing Module 的JavaScript设计模式，在函数的最底部我们可以看到它有一个公共函数validate供外部访问。
return {
validate: validate
};
};
//获取验证按钮和ValidationUtility函数对象
var
validator = new ValidationUtility(),
selector = '[data-role="trigger-validation"]';
//为验证按钮绑定点击事件
$(selector)click(function() {
if (validatorvalidate('email-form')) {
$('#msg')text('验证通过');
}
else {
$('#msg')text('验证未通过');
}
});
//---
}
</script>
<script data-main="/js/main" src="/js/jqueryjs"></script>
<script data-main="/js/main" src="/js/bootstrapjs"></script>
</body>
</body>
</html>
这些都是HTML5中新加入的一些新特性的使用方法。推荐你去教程网站秒秒学上把相关的基础知识夯实下，希望对你有帮助。
Bootstrap Form Generator是一个非常好用的创作工具，表单的设计一直以来都是一件比较头疼的事情，因为他需要和用户交互，需要考虑很多因素：用户交互、安全性等。Bootstrap Form Generator可以帮助您设计出更好的表单，从表现样式的主题到最复杂的表单验证，他都可以帮您完成！
一、Bootstrap Form Generator介绍
Web窗体是任何一个网站和一个干净的，友好的交互的核心方法，吸引力的形式是最小化错误或失败的意见至关重要。formoid是一个可怕的工具结合最新的设计理念和最先进的网络技术来帮助你创建你的最佳形式。
二、Bootstrap Form Generator特点
1、出色的GUI
最直观和易于使用的表单生成器-没有更多的手工编码，只是快速和简单的拖放式建筑。创建简单和复杂的形式是一个管理单元与formoid！
在MAC和Windows使用formoid你的首选平台-它支持MAC OSX 106 + Windows XP，Vista，，7或8
完全可定制的，迅速和容易地自定义布局，颜色和风格
配色方案很容易改变使用预先设计的颜色预置元素的颜色。多选和单选图标改变颜色和
实时预览预览窗口允许您预览更改您的瞬间形成，正是因为它会出现在浏览器
标准的领域-文本字段，段字段，选择和muliselect下拉菜单，复选框和单选按钮？formoid支持所有格式域
先进的领域，需要一些先进的东西？姓名，地址，电子邮件，网站的URL，文件上传，密码，日历，数码域，使您的生活更轻松
强制性的领域-标记领域为“需要”和显示一个警告信息如有必要。
反垃圾邮件的CAPTCHA添加最值得信赖和点击一个强大的谷歌reCAPTCHA。阻止垃圾邮件的自动机器人！
2、HTML表单
美丽的皮-现代公寓，地铁，自助形式的主题与花哨的颜色方案
液体布局，响应形式-你的形式将总是在任何桌面和移动设备看起来很棒
广泛的浏览器和设备兼容性形式正在仔细地多个浏览器， *** 作系统和设备进行测试，以确保他们看起来和执行所有旧的完善（包括IE6）或最新的浏览器，即使没有JavaScript。
视网膜准备所有的表单元素是用CSS，没有图像，所以他们看起来很完美，在所有的视网膜显示器和高分辨率的屏幕像素
圆滑的谷歌字体-厌倦了使用相同的旧的，无聊的字体，如宋体、timesroman？试着在你的形式新鲜的免费谷歌字体
CSS样式-纯CSS布局表格形式-收音机，复选框，选择，文件上传，日期选择器，工具提示，甚至谷歌的验证码！没有使用的图像！
现场验证形式验证用户类型域和显示工具提示，如果出现错误。形式验证是HTML5的支持以及
3、PHP表单的后端
PHP formoid不仅仅是客户端的HTML表单处理形式。它也产生一个强大的PHP处理程序来处理表单提交。
没有编码的服务器端PHP生成的代码是完全自动的，如果你的服务器支持PHP的，你只需要上传这个PHP文件在一个HTML。无需编程知识！
电子邮件****-一旦上传到服务器，PHP脚本将响应发送到你的电子邮件formoid程序集
导出到CSV -所有表单提交登录CSV文件
4、在线托管形式
一键发布，预览和测试“预览和测试”按钮立即上传您当前的形式，我们的服务器现场试驾
易于共享和嵌入-点击“共享”按钮，得到一个短的HTML代码片段，你可以通过电子邮件发送，嵌入到任何网页或创建一个漂亮的灯箱d出形式
即时通知-实时更新你的网上活动的电子邮件的形式
如果你的表格文件上传附件-收集，你可以随时访问的文件上传到你的用户
完全控制-管理你的所有托管的形式，看数据，查看和导出文件
安全形式-所有表单提交通过强大的256位加密传输的SSL（>
Bootstrap，来自
Twitter，是目前最受欢迎的前端框架。Bootstrap
是基于
HTML、CSS、JAVASCRIPT
的，它简洁灵活，使得
Web
开发更加快捷。
在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！
普通表单
我们需要将表单元素包裹到form-group类里，一般以<div
class="form-group"></div>来进行存放，而在它内容表单元素名称一般放在label标签里，而input标签的类名为form-control，值得注意的是，你的checkbox和radio等元素需要写在自己的div里。
例如下面的表单
<form>
<div
class="form-group">
<label
for="exampleInputEmail1">Email
address</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
placeholder="Email">
</div>
<div
class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
<div
class="form-group">
<label
for="exampleInputFile">File
input</label>
<input
type="file"
id="exampleInputFile">
<p
class="help-block">Example
block-level
help
text
here</p>
</div>
<div
class="checkbox">
<label>
<input
type="checkbox">
Check
me
out
</label>
</div>
<button
type="submit"
class="btn
btn-default">Submit</button>
</form>
运行之后的效果
水平排放的表单
需要你的表单元素需要水平排放，可以在表单上添加类form-inline，这种表单一般在元素比较少时比较适用
例如
<form
class="form-inline">
<div
class="form-group">
<label
class="sr-only"
for="exampleInputEmail3">Email
address</label>
<input
type="email"
class="form-control"
id="exampleInputEmail3"
placeholder="Email">
</div>
<div
class="form-group">
<label
class="sr-only"
for="exampleInputPassword3">Password</label>
<input
type="password"
class="form-control"
id="exampleInputPassword3"
placeholder="Password">
</div>
<div
class="checkbox">
<label>
<input
type="checkbox">
Remember
me
</label>
</div>
<button
type="submit"
class="btn
btn-default">Sign
in</button>
</form>
普通表单+元素水平排放
这种表单用的是最多的，在一般用户注册，填写资料时，经常可以见到如下的表单效果
实现这种表单使用了form-horizontal类，每行元素被包裹在
<div
class="form-group"></div>即可
form
class="form-horizontal">
<div
class="form-group">
<label
for="inputEmail3"
class="col-sm-2
control-label">Email</label>
<div
class="col-sm-10">
<input
type="email"
class="form-control"
id="inputEmail3"
placeholder="Email">
</div>
</div>
<div
class="form-group">
<label
for="inputPassword3"
class="col-sm-2
control-label">Password</label>
<div
class="col-sm-10">
<input
type="password"
class="form-control"
id="inputPassword3"
placeholder="Password">
</div>
</div>
<div
class="form-group">
<div
class="col-sm-offset-2
col-sm-10">
<div
class="checkbox">
<label>
<input
type="checkbox">
Remember
me
</label>
</div>
</div>
</div>
<div
class="form-group">
<div
class="col-sm-offset-2
col-sm-10">
<button
type="submit"
class="btn
btn-default">Sign
in</button>
</div>
</div>
</form>
我们通过代码也可以看到，在进行表单布局时，也可以用col-sm和col-sm-offset进行栅格布局！
以上所述是小编给大家介绍的Bootstrap表单Form全面解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
以上就是关于formValidation/bootstrap-validator使用说明全部的内容，包括:formValidation/bootstrap-validator使用说明、table.init函数可以传参吗、Bootstrap框架是什么，如何用Bootstrap框架实现表单验证等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）