1.bootstrap-table
$('#PersonInfoManage').bootstrapTable({
queryParams:function (params) {
var temp = { //用来传递一些参数，比如传递查询的条件
limit: params.limit, //页面大小
offset: params.offset, //页码
SearchText: $("#ppsearchtext").val()//查询框中输入的值
};
return temp;
},
singleSelect: true,//设置表格单选
clickToSelect: true, //是否启用点击选中行即点击表行就呈现选中状态
height: $('.bodyContent').height() - 180, //行高，表格高度可以固定一个值比如300，也可以向这样使表格自适应。（后边的数值180是表格父元素中除了表格这个子元素外其他元素的高）如果没有设置height属性，表格自动根据记录条数觉得表格高度
columns: [{
checkbox: true //加了复选框之后，表格行才会有选中状态，这个属性要和clickToSelect一起结合使用
}, {
field: 'PersonInfoID',
visible: false //设置特殊标识不可见
}, {
field: '',
title: '序号',
halign: 'center',
align: 'center',
formatter: function (value, row, index) {
var options = $("#PersonInfoManage").bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
},//如果不formatter的话，如果有分页，翻到下一页的时候序号会重新从1开始
width: 50
}, {
field: '',
title: '操作',
halign: 'center',
align: 'center',
formatter: function (value, row, index) {
var e = '<a href="javascript:Modify(\'' + row.PersonCardID + '\')">修改</a> ' + '<a href="javascript:del(\'' + row.PersonCardID + '\')" >删除</a> ';
return e;
},//对这一列进行formatter,添加修改和删除两个按钮，因为a标签本身有href的属性，所以写相关事件的话可以直接按上边的写法，之前有遇到过写了href,又写onclick()事件报错的情况，最好就写在href里边
width: 100
}
]
});
提示框 ：
1.模态框
<div class="modal fade" id="deatilMsgModal" tabindex="-1" role="dialog" aria-labelledby="deatilMsgLabel">//fade表示模态。。黑色背景 <div class="modal-dialog modal-lg" role="document">//modal-lg大号的模态框 <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="deatilMsgLabel">人员详情信息展示</h4>//模态框的标题 </div> <div class="modal-body"> //模态框中的内容 <p>身份证号：<span id="PersonCardID"></span></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="btn_submit">保存</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div>
2.Ewin.js
项目中用到最多的是Ewin.confirm(用来判断，有两个按钮确定和取消)
//以下是删除所有提示两次的情况，如果只有一个提示框的话，则取里边的Ewin.confirm代码就行
Ewin.confirm({ Img: "<" + 'img src="../Content/Images/tip.png"' + "/" + ">", message: "确认要删除所有人员吗？" }).on(function (e) {//这里的Img属性是后期自己定义的，如果想加别的参数也可以在源码里进行修改
if (!e) {
return; //点击了取消按钮，则返回
}
//点击了确定按钮后进行下一步
Ewin.confirm({ Img: "<" + 'img src="../Content/Images/tip.png"' + "/" + ">", message: "您真的确认要删除吗？" }).on(function (e) {
if (!e) {
return;
}
$(".deling").show();
$.post("/Person/deleteAllPersonInfo", {}, function (data, status) {
if (data) {
$(".deling").hide();
toastr.success('删除所有人员成功');
$("#PersonInfoManage").bootstrapTable('refresh');
}
else {
$(".deling").hide();
toastr.error('操作失败');
}
})
});
});
大概长这样：
3.toastr.js
提示框，样式多又用着很方便，也可以和AngularJs结合使用
toastr.error(' '); 错误提示
toastr.success(' '); 成功提示
toastr.warning(' '); 警告提示
它有这些选项：
toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-top-center", //提示框所在的位置 "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "1500", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }
大致是这样子：
BootstrapValidator:
使用的时候最外边一定要有form标签（包含要验证的内容以及提交按钮）
每个input框都要有name属性
/表单必填验证 function userForm() { $('#userForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, //这些是当框内输错格式，设置必填却没有填值等时显示的图标 fields: { UserName: {//这里的UserName对应前边的name属性 validators: { notEmpty: { message: '姓名不能为空' }, stringLength: { max: 50, message: '姓名最多只能输入50个字符' } } }, oldPassword: { validators: { notEmpty: { message: '用户密码不能为空' }, stringLength: { max: 50, message: '用户密码最多只能输入50个字符' } } }, } } } }) }
//因为给验证事件封装成了一个函数(也可以按照官网上那样写法，提交按钮type=’submit’,直接提交，但是这种写法会引发提交两次的问题，所以个人认为手动触发验证比较好)
提交数据：
var bootstrapValidator = $('#userForm').data('bootstrapValidator'); //手动触发验证 bootstrapValidator.validate(); if (bootstrapValidator.isValid()) {}
//新增修改弹窗中会重复打开多次，所以上次的验证状态要去除
$("#userForm").data('bootstrapValidator').destroy(); //摧毁验证
$('#userForm').data('bootstrapValidator', null);
userForm();//重新调用验证
bootstrapDateTimePicker:
只显示小时分钟，且选择时间后，设置截至时间不能小于起始时间同时起始时间不能大于截至时间
var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); var SDate = new Date(year, month, day, 0, 0, 0); var EDate = new Date(year, month, day, 12, 0, 0); //日期插件 $("#amdate").datetimepicker({ autoclose: true, startView: 0,//设置一开始显示的视图，有年月日时视图 minView: 0,//设置显示的最小级视图 maxView:0,//设置显示的最大级视图 minuteStep: 5,//时间间隔5分钟 language: 'zh-CN', forceParse: 0, format: 'hh:ii',//hh选择数据后框内时间显示为24小时制 startDate: SDate,//设置起始时间 endDate: EDate,//设置结束时间 showMeridian: true,//显示上午下午 }).on('changeDate', function (event) { event.preventDefault(); event.stopPropagation(); var startTime = event.date; $('#amenddate').datetimepicker('setStartDate', startTime); //设置起始时间的方法，和stratDate效果一样但用法不同，一个是方法一个是属性 }); $("#amenddate").datetimepicker({ autoclose: true, startView: 0, minView: 0, maxView: 0, minuteStep: 5, language: 'zh-CN', forceParse: 0, format: 'hh:ii', startDate: SDate, endDate: EDate, showMeridian: true, }).on('changeDate', function (event) { event.preventDefault(); event.stopPropagation(); var endTime = event.date; $('#amdate').datetimepicker('setEndDate', endTime); });
界面：
浙公网安备 33010602011771号