Bootstrap插件
bootstrap-fileinput：bootstrap 文件上传插件
1、需要导包及汉语支持
2、初始化组件
$(document).ready(function() {
InitFileUpload();
}
function InitFileUpload(){
$("#appFile").fileinput({
language:'zh', //设置语言
uploadUrl:'../../tmarket/appupload.action', //请求URL
maxFileCount: 1, //表示允许同时上传的最大文件个数
allowedFileExtensions : ['apk', 'ipa' , 'zip'] //限制文件上传格式
}).on("fileuploaded", function(event, data, previewId, index) { //文件上传成功后回调函数
var appData = data.response; //获取服务端返回数据(比如返回的JSON格式字符串)
appData = eval("("+appData+")");
$('#appName').val(appData.appName);
$('#appLink').val(appData.appLink);
});
}3、声明一个 file 标签即可
bootstrap-datetimepicker：bootstrap 时间选择插件
1、需要导包及汉语支持
2、初始化组件
$(document).ready(function() {
initDatetimepicker();
}
function initDatetimepicker() {
$('.datetimeAt').datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd hh:ii:ss',//显示格式
minView: "month",//设置只显示到月份
initialDate: new Date(),//初始化当前日期
autoclose: true,//选中自动关闭
todayBtn: true//显示今日按钮
})
}3、将对应input标签设置为时间格式
bootstrapvalidator：bootstrap 表单验证插件
1、需要导包及汉语支持
2、初始化组件
$(document).ready(function() {
formValidator();
}
//写入验证规则
function formValidator(){
$("form").bootstrapValidator({ //获取form表单Id
feedbackIcons: { //提示图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
pwd(需要验证的字段): {
validators: {
notEmpty: {//检测非空,radio也可用
message: '文本框必须输入'
},
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在
url: '指定页面',
message: 'The username is not available'
},
different: {//与指定文本框比较内容相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
emailAddress: {//验证email地址
message: '不是正确的email地址'
},
identical: {//与指定控件内容比较是否相同，比如两次密码不一致
field: 'confirmPassword',//指定控件name
message: '输入的内容不一致'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件选择的数量
min: 2,
max: 4,
message: '必须选择2-4个选项'
}
}
}
}
});
}3、提交触发验证（本案例使用普通button按钮绑定点击事件来触发Ajax提交数据的方式）
$('#confirmAdd').on('click',function () { //点击按钮触发提交
$('form').data("bootstrapValidator").validate(); //当页面按钮为普通的button时，需要手动触发bootstrap验证
isValid = $('form').data("bootstrapValidator").isValid(); //验证是否通过true/false
if(!isValid){ //验证是否通过true/false
return false; //没通过结束执行
}
$.ajax({
………… //通过了继续执行Ajax提交
})
}4、重置表单验证，防止再次打开时还停留在上一次验证状态
$("form").data('bootstrapValidator').destroy();//清除当前验证
$('form').bootstrapValidator(formValidator());//重新添加校验注意：要用BootstrapValidator验证器，必须要按照bootstrap格式来写，要验证的控件用下面的标签及样式包裹。
bootstrap-paginator：bootstrap 分页插件
1、需要导包
2、JS页面定义分页需要用到的常量
var PAGESIZE = 5; // 每页显示记录数
var TOTALNUM = 0; // 总数据条数
var TOTALPAGES = 0; // 总页数
var NOWPAGE= 1;// 当前页数
var searchObj = new Object(); // 存储查询条件3、初始化组件
var PAGESIZE = 5; // 每页显示记录数，在页面写死了
var TOTALNUM = 0; // 总数据条数，后面会去后端查询出来实际的数据条数
var TOTALPAGES = 0; // 总页数，后面会根据上面两条数据计算得出
var NOWPAGE= 1;// 当前页数，页面初始化后停留在定位在第1页
function fnInitPagination(){
var options={
bootstrapMajorVersion:3, //bootstrap的版本要求
currentPage:NOWPAGE,//当前页数
totalPages:TOTALPAGES,//总页数
numberOfPages:PAGESIZE,//每页记录数
itemTexts : function(type, page, current) {//设置分页按钮显示字体样式
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
//分页按钮点击事件，参数page代表该事件绑定所有按钮，如果换成next代表只有下一页按钮绑定该事件
onPageClicked:function(event,originalEvent,type,page){
NOWPAGE = page;
gotoPage();
}
}
$("#pageInfo").bootstrapPaginator(options);
}4、查询总数据条数（TOTALNUM）
function fnInitData(){
$.ajax({
url:"getTotalNum.do",
type:"get",
dataType:"json",
data:{
"userName":searchObj.userName,
"gender":searchObj.gender,
"trueName":searchObj.trueName,
"phoneNumber":searchObj.phoneNumber,
"email":searchObj.email,
"qqNumber":searchObj.qqNumber,
"userStatus":searchObj.userStatus
},
success:function(data){
TOTALNUM = data; //获取总记录条数
var yushu = TOTALNUM % PAGESIZE;
if(yushu>0) { //根据总记录条数和PAGESIZE来计算总页数
TOTALPAGES = TOTALNUM / PAGESIZE +1;
}else {
TOTALPAGES = TOTALNUM / PAGESIZE;
}
gotoPage();
}
});
}5、分页查询
function gotoPage(){
$.ajax({// 根据page去后台加载数据
url:"selByPage.do",
type:"get",
dataType:"json",
data:{
"nowPage":(NOWPAGE-1)*PAGESIZE,// 前台的NOWPAGE代表页码，而传到后台的nowPage代表数据起始偏移量
"pageSize":PAGESIZE,
"userName":searchObj.userName,
"gender":searchObj.gender,
"trueName":searchObj.trueName,
"phoneNumber":searchObj.phoneNumber,
"email":searchObj.email,
"qqNumber":searchObj.qqNumber,
"userStatus":searchObj.userStatus
},
success:function(data){
$("#tableList tbody").find("tr").remove();// 删除所有tr
var s = '';
for(var i=0;i"
+""
+""+data[i].userName+" "
+""+gender+" "
+""+data[i].trueName+" "
+""+data[i].phoneNumber+" "
+""+data[i].qqNumber+" "
+""+data[i].email+" "
+""+status+" "
+""+data[i].userDesc+" ";
}
$("#tableList tbody").append(s);
fnInitPagination(); //初始化分页组件
},
error:function(){
alert("数据初始化失败");
}
});
} 6、条件查询
function searchInfo(){
$("#confirmSearchBtn").click(function(){
searchObj.userName = $("#userName ").val();
searchObj.gender = $('input:radio[name="gender"]:checked').val();
searchObj.trueName = $("#trueName").val();
searchObj.phoneNumber = $("#phoneNumber").val();
searchObj.email = $("#email").val();
searchObj.qqNumber = $("#qqNumber").val();
searchObj.userStatus = $("#userStatus").val();
NOWPAGE= 1; // 查询成功后将页面定位到第一页，否则分页始终停留在当前页
fnInitData(); // 重新进行分页查询
});
}