bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享


Posted in Javascript onJanuary 24, 2017

1.bootstrap-table 单击单行选中

$('#gzrwTable').on('click-row.bs.table', function(e, row, $element) {
$('.success').removeClass('success');// 清除前一次操作已选中行的选中状态
$($element).addClass('success');// 选中行添加选中状态
});

2.bootstrap-table 获取选中行信息

function getSelectedRow() {
var index = $('#gzrwTable').find('tr.success').data('index');
return $('#gzrwTable').bootstrapTable('getData')[index];
}

3.时间控件 填写默认当前时间信息

var date = new Date();
var mon = date.getMonth() + 1;
var day = date.getDate();
var nowDay = date.getFullYear() + "-"
+ (mon < 10 ? "0" + mon : mon) + "-"
+ (day < 10 ? "0" + day : day);
$("#endTime").val(nowDay);

4.bootstrap-table 验证表单信息 根据name值

function checkForm(formId) {
$(formId).bootstrapValidator({
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
task : {
group : '.col-sm-10',// 对应前台input的class占用宽度
validators : {
notEmpty : {
message : '请填任务内容!'
}
}
},
tel : {
group : '.col-sm-4',// 对应前台input的class占用宽度
validators : {
notEmpty : {
message : '请填写电话!'
},
phone : {
country : "CN",
message : '电话号码格式错误'
}
}
},
area : {
group : '.col-sm-4',// 对应前台input的class占用宽度
validators : {
numeric : {
message : '请填写数字!'
}
}
},
endtime : {
group : '.col-sm-4',// 对应前台input的class占用宽度
validators : {
notEmpty : {
message : '请选择截止日期!'
}
}
},
}
});
}
// 获取表单验证数据
var bootstrapValidator = $("#addTaskForm").data('bootstrapValidator');
// 验证表单
bootstrapValidator.validate();
// 判断是否全部验证通过 为通过重新验证,通过执行ajax
if (!bootstrapValidator.isValid()) {
return;
}

5.动态加载下拉框的内容 多选 单选都一样

function setUser() {
$("#receiver")[0].options.length = 0;
$.ajax({
type : 'POST',
url : $.el.Register.AppUrl + "gzrw/selectUser",
dataType : 'json',
success : function(data) {
$("#receiver")[0].options.add(new Option('请选择', ''));
for (var i = 0; i < data.length; i++) {
$("#receiver")[0].options.add(new Option(data[i].name,
data[i].id));
}
// 下拉框内容刷新
$("#receiver").selectpicker('refresh');
},
error : function(e) {
}
});
}

6.导出事件

$("#btnExport").click(function() {
var tableNum = $("#sgnqTable thead tr th").length;
$("#sgnqTable").tableExport({
type : 'excel', // 'csv', 'txt', 'sql', 'json', 'xml', 'excel',
// 'doc', 'png' or 'pdf'
fileName : '表名',
escape : 'false',
ignoreColumn : [ tableNum - 1, tableNum - 4 ],// 不导出的列
});
});

面给大家分享bootstrapt-table 大量字段整体表单上传之时间处理

js 中用$('#addUserForm').serialize(),//获取表单中所有数据 传送到前台 (controller)

$.ajax({ type : "POST",

 url : $.el.Register.AppUrl + "path",

data :$('#addUserForm').serialize(),//获取表单中所有数据

dataType : 'json',

async : false,

success : function(msg) { },

error : function(error) { } });

这时如果表单中有时间类型 因为传过来的都是字符串类型 所以前台(实体)的时间类型接不到

 解决方法:

(1)可在entity 实体里字段上加@DateTimeFormat(pattern = "yyyy-MM-dd")

(2) 在controller中用个String接这个变量(不能和字段名重名) 转化为时间类型 再用 就可以了

public String addTask(User user(实体对象),
String dateStr(用于接时间)) 
{ 
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); 
ParsePosition pos = new ParsePosition(0); 
Date date = sdf.parse(dateStr,pos); 
gzrw.setEndtime(date);//将时间加入实体 }

以上所述是小编给大家介绍的bootstrop table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
js实现tab切换效果实例
Sep 16 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
Vue+Django项目部署详解
May 30 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
树结构之JavaScript
Jan 24 #Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 #Javascript
javascript 正则表达式去空行方法
Jan 24 #Javascript
JavaScript中动态向表格添加数据
Jan 24 #Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 #Javascript
ajax分页效果(bootstrap模态框)
Jan 23 #Javascript
jquery easyui DataGrid简单示例
Jan 23 #Javascript
You might like
php防止SQL注入详解及防范
2013/11/12 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
美容院营销方案
2014/03/05 职场文书
学习交流会主持词
2014/04/01 职场文书
梅花魂教学反思
2014/04/25 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
优秀会计求职信
2014/07/04 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
合作协议书范本
2014/10/25 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2014年电教工作总结
2014/12/19 职场文书
采购员岗位职责范本
2015/04/07 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python