首页 / 脚本样式 / JavaScript / bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享

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（）;// 判断是否全部验证通过 为通过重新验证，通过执行ajaxif （！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之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！