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 相关文章推荐
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 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 分页分组类
2009/12/10 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Python 中的 else详解
2016/04/23 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Django如何配置mysql数据库
2018/05/04 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
写出二分查找算法的两种实现
2013/05/13 面试题
毕业生自荐信
2013/12/14 职场文书
简历的自我评价范文
2014/02/04 职场文书
关于读书的演讲稿
2014/05/07 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS