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

前端之家收集整理的这篇文章主要介绍了bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.bootstrap-table 单击单行选中

添加选中状态 });

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

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

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

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.动态加载下拉框的内容 多选 单选都一样

内容刷新 $("#receiver").selectpicker('refresh'); },error : function(e) { } }); }

6.导出事件

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接这个变量(不能和字段名重名) 转化为时间类型 再用 就可以了

}

以上所述是小编给大家介绍的bootstrop table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章