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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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实现的随机广告显示代码
2007/06/14 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
php异常处理捕获错误整理
2019/09/23 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
python 全文检索引擎详解
2017/04/25 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
pandas 选择某几列的方法
2018/07/03 Python
Python安装selenium包详细过程
2019/07/23 Python
毕业生的求职信范文分享
2013/12/04 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
总账会计岗位职责
2014/03/13 职场文书
小学生寒假家长评语
2014/04/16 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android