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 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
三种php连接access数据库方法
2013/11/11 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
计算机专业推荐信范文
2013/11/20 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
社区文化建设方案
2014/05/02 职场文书
会计系毕业生求职信
2014/05/28 职场文书
经理聘任证明
2015/03/02 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
js之ajax文件上传
2021/05/13 Javascript
基于Python实现nc批量转tif格式
2022/08/14 Python