bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
1.bootstrap-table单击单行选中
$('#gzrwTable').on('click-row.bs.table',function(e,row,$element){
$('.success').removeClass('success');//清除前一次操作已选中行的选中状态
$($element).addClass('success');//选中行添加选中状态
});
2.bootstrap-table获取选中行信息
functiongetSelectedRow(){
varindex=$('#gzrwTable').find('tr.success').data('index');
return$('#gzrwTable').bootstrapTable('getData')[index];
}
3.时间控件填写默认当前时间信息
vardate=newDate();
varmon=date.getMonth()+1;
varday=date.getDate();
varnowDay=date.getFullYear()+"-"
+(mon<10?"0"+mon:mon)+"-"
+(day<10?"0"+day:day);
$("#endTime").val(nowDay);
4.bootstrap-table验证表单信息根据name值
functioncheckForm(formId){
$(formId).bootstrapValidator({
message:'Thisvalueisnotvalid',
feedbackIcons:{
valid:'glyphiconglyphicon-ok',
invalid:'glyphiconglyphicon-remove',
validating:'glyphiconglyphicon-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:'请选择截止日期！'
}
}
},
}
});
}
//获取表单验证数据
varbootstrapValidator=$("#addTaskForm").data('bootstrapValidator');
//验证表单
bootstrapValidator.validate();
//判断是否全部验证通过为通过重新验证，通过执行ajax
if(!bootstrapValidator.isValid()){
return;
}
5.动态加载下拉框的内容多选单选都一样
functionsetUser(){
$("#receiver")[0].options.length=0;
$.ajax({
type:'POST',
url:$.el.Register.AppUrl+"gzrw/selectUser",
dataType:'json',
success:function(data){
$("#receiver")[0].options.add(newOption('请选择',''));
for(vari=0;i<data.length;i++){
$("#receiver")[0].options.add(newOption(data[i].name,
data[i].id));
}
//下拉框内容刷新
$("#receiver").selectpicker('refresh');
},
error:function(e){
}
});
}
6.导出事件
$("#btnExport").click(function(){
vartableNum=$("#sgnqTabletheadtrth").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接这个变量（不能和字段名重名）转化为时间类型再用就可以了
publicStringaddTask(Useruser（实体对象）,
StringdateStr（用于接时间）)
{
SimpleDateFormatsdf=newSimpleDateFormat("yyyy-MM-dd");
ParsePositionpos=newParsePosition(0);
Datedate=sdf.parse(dateStr,pos);
gzrw.setEndtime(date);//将时间加入实体}
以上所述是小编给大家介绍的bootstroptable之通用方法（时间控件，导出，动态下拉框，表单验证，选中与获取信息）代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！