bootstrap-table， BootstrapValidator，layer

最新推荐文章于 2023-09-01 17:30:53 发布

mwp5212

最新推荐文章于 2023-09-01 17:30:53 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/mwp5212/article/details/77253103

版权

bootstrapTable

$('#prjTable').bootstrapTable({
		url : basePath + 'prj/info/listPagerPrj',
		
		columns : [ {
			
			checkbox : true,

		},{
	  		 field: 'id',
	  		 title: '序号'
	  		 sortable : true, //点击表头排序
			 visible : false, // 隐藏列		 						  									         
	  	},{
			field : 'projectId',
			title : '项目编号',
			align : 'center',
		},{
			field : 'projectName',
			title : '项目名称',
			align : 'center',
		},{
			field : 'leaderMan',
			title : '项目经理',
			align : 'center',
		},{
			field : 'customerName',
			title : '客户',
			align : 'center',
		},{
			field : 'planToStart',
			title : '计划开始时间',
			align : 'center',
			formatter : function(value, row, index) {
				return row.planToStart.substr(0,10);
			}
		},{
			field : 'planToEnd',
			title : '计划结束时间',
			align : 'center',
			formatter : function(value, row, index) {
				return row.planToEnd.substr(0,10);
			}
		},{
			field : 'gemo',
			title : '项目范围',
			align : 'center',
			formatter : function(value, row, index) {
				return "<a href='javascript:void(0);' onclick=getGemo(" + "'" + row.projectId + "'" + ")>查看范围</a>"
			}
		},{
			field : '_op',
			title : '操作',
			align : 'center',
			formatter : function(value, row, index) {
				return "<a href='javascript:void(0);' onclick=getPrjInfo(" + "'" + row.projectId + "'" + ")>查看明细</a>"
			}
		}],
		method : 'post', //请求方式(*)
		striped : true, //是否显示行间隔色
		cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
		pagination : true, //是否显示分页(*)
		sortable : false, //是否启用排序
		sortName : 'id', //排序的列名(必须是columns里有的)
		sortOrder : "desc", //排序方式
	  //queryParams: oTableInit.queryParams,//传递参数(*)
		sidePagination : "server", //分页方式：client客户端分页，server服务端分页(*)
		pageNumber : 1, //初始化加载第一页，默认第一页
		pageSize : 15, //每页的记录行数(*)
		pageList : [ 30, 60, 100 ], //可供选择的每页的行数(*)
	    search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		strictSearch : true, //精确查找
		showColumns : false, //是否显示所有的列
		showRefresh : false, //是否显示刷新按钮
		minimumCountColumns : 2, //最少允许的列数
		clickToSelect : true, //是否启用点击选中行
	  //height : getHeight(), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		height: 950,
		uniqueId : "id", //每一行的唯一标识，一般为主键列
		showToggle : true, //是否显示详细视图和列表视图的切换按钮
		cardView : false, //是否显示详细视图
		detailView : false, //是否显示父子表
		showExport : true,//按格式导出
		queryParamsType : "limit",
		toolbar: '#toolbar', //工具按钮用哪个容器
		contentType : "application/x-www-form-urlencoded; charset=UTF-8",
		checkboxHeader : true,
		singleSelect : true,
		striped : true,
		showColumns: true, // 开启自定义列显示功能
		queryParams: function queryParams(params) {   //设置查询参数	
         var param = {
           //这里是在ajax发送请求的时候设置一些参数 params有什么东西，自己看看源码就知道了
           page: params.offset / params.limit + 1,
           rows: params.limit,
           sort : "id",
		   order : params.order,
		   //下面写自定义查询栏里的内容或者跳转到该页面是查询所带的参数
		   projectId : $("#projectId").val(),
		   projectName : $("#projectName").val(),
         };
         exportOptions = {
		    ignoreColumn : [ 0, 9 ], // 忽略某一列的索引
	    	fileName : '项目列表', // 文件名称设置
	    	worksheetName : 'sheet1', // 表格工作区名称
		},
		onLoadSuccess: function(){  //加载成功时执行  
			 layer.msg("数据加载成功!", {time : 1500, icon : 6});
       	 },  
           onLoadError: function(){  //加载失败时执行  
           	 layer.msg("加载数据失败", {time : 1500, icon : 5});
           } 								
	});
}

/*
排序所需要的参数
sortable : true, //是否启用排序
sortOrder : "desc", //排序方式
sortName : "id",
查询参数必须带:order : params.order,
*/
<!-- -------------------------- 按钮组样式 ----------------------------------- -->
<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接</button>
![button效果图](https://img-blog.csdn.net/20180202085450195?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXdwNTIxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

//查询
function queryPrjInfo() {   	
  	$("#prjTable").bootstrapTable('refresh');
  	//所有的refresh后面要重置页码，否则刷新页面时当前的页码会当作参数传过去，导致查出来的数据可能会少
  	$("#prjTable").bootstrapTable('selectPage',1);
  }
  
 //重置 
function resetPrjInfo() {
 	document.getElementById("searchForm").reset()
 	$("#prjTable").bootstrapTable('refresh');
 	//所有的refresh后面要重置页码，否则刷新页面时当前的页码会当作参数传过去，导致查出来的数据可能会少
 	$("#prjTable").bootstrapTable('selectPage',1);
 }

columns列属性

   BootstrapTable.COLUMN_DEFAULTS = {
       radio: false,// 有否radio，有则options.singleSelect设为真
       checkbox: false,// 有否checkbox，options.singleSelect设为真，checkbox单选
       checkboxEnabled: true,// 复选框是否可选
       field: undefined,// 后台数据的id号
       title: undefined,// 内容文案
       titleTooltip: undefined,// title属性文案
       'class': undefined,// 样式
       align: undefined, // tbody、thead、tfoot文本对齐情况
       halign: undefined, // thead文本对齐情况
       falign: undefined, // tfoot文本对齐情况
       valign: undefined, // 垂直对齐情况
       width: undefined, // 宽度，字符串或数值输入，均转化为"36px"或"10%"形式
       sortable: false,// 是否可排序，options.sortable设置为真的时候可用
       order: 'asc', // asc, desc
       visible: true,// 可见性
       switchable: true,// 该条目可以通过筛选条目按钮切换显示状态
       clickToSelect: true,
       formatter: undefined,
       // 以function(field,row,index){}格式化数据，field后台字段，row行数据，index对应row的序号值
       // 无配置时以title显示，有配置时以返回值显示
       footerFormatter: undefined,// 填充表尾内容
       events: undefined,// 数据格式为[{"click element":functionName}],回调中传入（value,row,index）
       sorter: undefined,// 调用sorter函数或window[sorter]函数进行排序，高优先级
       sortName: undefined,// 进行排序的字段名，用以获取options.data中的数据
       cellStyle: undefined,// 调用cellStyle函数或window[cellStyle]函数添加样式以及类; 以function(field,row,index){}设置单元格样式以及样式类，返回数据格式为{classes:"class1 class2",css:{key:value}}
       searchable: true,// 设置哪一列的数据元素可搜索
       searchFormatter: true,
       cardVisible: true// 设为否时，卡片式显示时该列数据不显示
   };

layer弹窗

layer.open({  
  type: 2,  //基本层类型 0(信息框,默认) 1(页面层) 2(iframe层) 3(加载层) 4(tips层)
  title: "添加项目信息",  
  closeBtn: 1,  //layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
  shade: [0.8, '#000'],  //弹层外区域。默认是0.3透明度的黑色背景（'#000'）。
  border: [0],    
  area: ['1000px', '1000px'],  //宽高
  btn: ['<div style="width:80px ;text-align:center">保存</div>','<div style="width:80px ;text-align:center">重置</div>'],
  content: webBasePath + '/prj/info/addPageprj/'+loginDepartmentId,
  success: function(layero, index){  //层弹出后的成功回调方法 

     },
 yes: function(index,layero){
  save();
  },
  btn2: function(index,layero){
  reset();
  },
  });

ajax success

success : function(result) {
		if (result.code == "200") {
		    layer.msg("新增成功!");
		    setTimeout(function(){
				parent.$('#dataList').bootstrapTable('refresh',{silent : true});
				parent.layer.closeAll();
		    },1000)
		} else {
		    layer.alert(result.msg);
		}
}

BootstrapValidator

$(function() {
    $("#inputForm").bootstrapValidator(vaildatorRule);
    validator = $("#inputForm").data('bootstrapValidator');
});

var validator;
var vaildatorRule = {
    message : '输入内容无效!',
    feedbackIcons : {
        valid : 'glyphicon glyphicon-ok',
        invalid : 'glyphicon glyphicon-remove',
        validating : 'glyphicon glyphicon-refresh'
    },
    fields : {
        unitPrice : {// 表单name
            message : '单价不能为空',// 提示消息
            validators : {// 需要做的验证
	       		notEmpty : {
		            message : '单价不能为空'
	        	},
            }
        },
        workload : {// 表单name
            message : '工作量不能为空',// 提示消息
            validators : {// 需要做的验证
		        notEmpty : {
		            message : '工作量不能为空'
		        },
            }
        },
        unit : {// 表单name
            message : '单位不能为空',// 提示消息
            validators : {// 需要做的验证
		        notEmpty : {
		            message : '单位不能为空'
		        },
            }
        },
        itemName : {// 表单name
            message : '预算分类不能为空',// 提示消息
            validators : {// 需要做的验证
	        notEmpty : {
	            message : '预算分类不能为空'
	        },
            }
        }
    }
};

$('#btnSubmit').click(function() {
    validator.validate();
    if (!validator.isValid()) {
	return;
    }
    //下面写提交时的ajax
})

mwp5212

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
bootstrap-table， BootstrapValidator，layer

bootstrapTable$('#prjTable').bootstrapTable({ url : basePath + 'prj/info/listPagerPrj', columns : [ { checkbox : true, },{ field: 'id', ...
复制链接

扫一扫