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

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();

// 判断是否全部验证通过 为通过重新验证，通过执行ajax

if (!bootstrapValidator.isValid()) {

return;

}

5.动态加载下拉框的内容 多选 单选都一样

function setUser() {

$("#receiver")[0].optiohttp://ns.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].idhttp://));

}

// 下拉框内容刷新

$("#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之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。