bootstrap-fileinput：bootstrap 文件上传插件
1、需要导包及汉语支持
<link rel="stylesheet" href="../vendor/bootstrap-fileinput-master/css/fileinput.min.css"> <script src="../vendor/bootstrap-fileinput-master/js/fileinput.min.js"></script> <script src="../vendor/bootstrap-fileinput-master/js/locales/zh.js"></script>
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 标签即可
<input id="f_upload" name="image" type="file" multiple/> <!-- 加了multiple属性就可以支持一次上传多个文件 -->
bootstrap-datetimepicker：bootstrap 时间选择插件
1、需要导包及汉语支持
<link rel="stylesheet" href="../vendor/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <script src="../vendor/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="../vendor/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
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标签设置为时间格式
<input id="expectationAt" class="datetimeAt" name="ops.expectationAt">
bootstrapvalidator：bootstrap 表单验证插件
1、需要导包及汉语支持
<link rel="stylesheet" href="../vendor/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css"> <script src="../vendor/bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script> <script src="../vendor/bootstrapvalidator-master/dist/js/language/zh_CN.js"></script>
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格式来写，要验证的控件用下面的标签及样式包裹。
<div class="form-group"> </div>
bootstrap-paginator：bootstrap 分页插件
1、需要导包
<script src="../vendor/bootstrap-paginator/dist/js/bootstrap-paginator.js"></script>
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.length;i++){ var gender = getGender(data[i].gender); var status = data[i].userStatus=="0"?"启用":"禁用"; s+="<tr><td><input type='checkbox' name='items' value="+data[i].id+"></td>" +"<td style='display:none'>"+data[i].id+"</td>" +"<td>"+data[i].userName+"</td>" +"<td>"+gender+"</td>" +"<td>"+data[i].trueName+"</td>" +"<td>"+data[i].phoneNumber+"</td>" +"<td>"+data[i].qqNumber+"</td>" +"<td>"+data[i].email+"</td>" +"<td>"+status+"</td>" +"<td>"+data[i].userDesc+"</td></tr>"; } $("#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(); // 重新进行分页查询 }); }
