bootstrap-table， BootstrapValidator，layer
阙辰龙
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>
//查询
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
})
类似资料：