bootStrapTable;
$(function () { var oTable = new TableInit(); oTable.Init(); }); var TableInit = function () { var oTableInit = new Object(); oTableInit.Init = function () { $('#table').bootstrapTable({ url: '/xx/xx', //请求后台的URL（*） method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortName: 'xx',// 默认排序字段 sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 15, //每页的记录行数（*） pageList: [15, 25, 50, 100], //可供选择的每页的行数（*） search: false, //是否显示表格搜索，此搜索是客户端搜索,也可以是服务端检索 silent: true, strictSearch: true,//设置为 true启用全匹配搜索，否则为模糊搜索。 showColumns: false, //是否显示所有的列.前端可选择显示哪些列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "customerId", //每一行的唯一标识，一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 //得到查询的参数 queryParams: function (params) { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 var query_params = { limit: params.limit, //页面大小 offset: params.offset, //页码 sort: params.sort, //排序列名 order: params.order, //排位命令（desc，asc） //查询框中的参数传递给后台 xx: $('#xxId').val(), // 请求时向服务端传递的参数 }; return query_params; }, columns: [ { title: 'xxxx', field: 'xxName', align: "center", valign: 'middle', sortName: 'xx', sortable: true, formatter: function (value, row, index) { return [ '<a onclick="openEditDetailsModel("' + row.customerId + '","' + row.xx+ '","' + value + '")" style="cursor:pointer;" tabindex="0">' + value + '</a>' ].join(''); } }, { title: 'xx', field: 'xx', align: "center", valign: 'middle', sortName: 'xx', sortable: true } ] }); }; return oTableInit; };bootStrap Validator验证
function xxValidator() { // bootstrapValidator表单校验 $(".formClassName").bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { checkName: { validators: { notEmpty: { message: 'errorMessage' }, stringLength: { /*长度提示*/ min: 1, max: 20, message: 'errorMessage' }, remote: { url: "/xx/xxx", data: function (validator) { return { checkName: $("#checkName").val(), }; }, message: 'errorMessage', delay: 10 }, callback: { message: "errorMessage", callback: function (value, validator) { for (var i = 0; i < allCheckName.length; i++) { if (value == allCheckName[i]) { return false; } } return true; } } } }, checkName: { validators: { notEmpty: { message: 'errorMessage' }, stringLength: { min: 1, max: 20, message: 'errorMessage' }, regexp: { regexp: /^([1-9]\d{0,15}|[0]{1,1})$/, message: 'errorMessage' } } } } }) // 有效日期格式 bootstrap validator 日期插件 验证. 日期插件点击需要重新更新验证 $("#dateId").on('change', function (e) { $('.formClassName').data('bootstrapValidator').updateStatus('checkName', 'NOT_VALIDATED', null).validateField('checkName'); }); }
bootstrap validator 验证:
前台的table或tr,input是js动态生成的,需要用到 addField
for (.................){
tr="..<input type=text id = inputId>..."
tr.append("....................");
tr.appendTo("....................")
// xxxxxxx:动态添加的元素例如:$("#inputId) 然后在$(".formClassName").bootstrapValidator({里面需要添加对应的校验信息内容规则})
$(".formClassName").bootstrapValidator('addField', xxxxxxx);}
验证完 关键之处:
// model关闭
$('#modeId').on('hidden.bs.modal', function () {// 清除动态添加的验证
$(".formClassName").bootstrapValidator('removeField', 'checkName');// 销毁验证
$(".formClassName).data('bootstrapValidator').destroy();// 重新加载验证
xxValidator();
// 重新刷新table
$('#tableId').bootstrapTable('refresh');}
