100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > bootstrap-table之通用方法( 时间控件 导出 动态下拉框 表单验证 选中与获取信息)

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

时间:2023-07-08 06:54:24

相关推荐

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.bootstrop-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 ],// 不导出的列

});

});

更多专业前端知识,请上【猿2048】

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。