bootstrap的入门
此博文只包含前端代码的部分，含有树形控件菜单展示，表格控件的增删查改，以及模态框弹出，和数据的导入导出，图片的上传下载。
主页面index.jsp
Insert title here
网上书店后台管理
对应的js文件
$(function(){
//树形菜单加载
$.post($("#contextPath").val()+"/menuAction.action?methodName=list",function(data){
$('#tree').treeview({
data : data,
emptyIcon: "glyphicon glyphicon-send",//定义叶子节点图标
levels: 3,//默认展示到三级
onNodeSelected:function(event, data) {
//当树形被选中，添加选项卡
$('#mainFrameTabs').bTabsAdd(data.id,data.text,data.attributes.MENU_URL);
calcHeight();
}
})
})
//自适应内容高度
var calcHeight = function(){
var browserHeight = $(window).innerHeight();
var topHeight = $('#mainFrameHeadBar').outerHeight(true);
var tabMarginTop = parseInt($('#mainFrameTabs').css('margin-top'));//获取间距
var tabHeadHeight = $('ul.nav-tabs',$('#mainFrameTabs')).outerHeight(true) + tabMarginTop;
var contentMarginTop = parseInt($('div.tab-content',$('#mainFrameTabs')).css('margin-top'));//获取内容区间距
var contentHeight = browserHeight - topHeight - tabHeadHeight - contentMarginTop;
$('div.tab-content',$('#mainFrameTabs')).height(contentHeight);
};
//bTabs组件初始化
$('#mainFrameTabs').bTabs();
loadSelect();
})
//下拉框加载
function loadSelect(){
$.post($("#contextPath").val()+"/typeAction.action?methodName=listType",function(data){
var types = eval("("+data+")");
for (var i = 0; i < types.length; i++) {
$("#book_category_id").append("");
}
});
}
bookList.jsp
Insert title here
对应js
$(function(){
//数据表格加载
$('#table').bootstrapTable({
url : $("#contextPath").val() + "/bookAction.action?methodName=listBook",
method: 'POST',
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
toolbar : '#toolbar',
sidePagination: "client",//客户端分页（客户端分页与服务端分页的数据格式不一样）
striped: true,//设置为 true 会有隔行变色效果。
cache: false,//设置为 false 禁用 AJAX 数据缓存。
pagination: true,
pageNumber:1,
pageSize: 5,
pageList: [5,10, 25, 50, 100],
search : true,//是否启用搜索框。
showColumns: true,//是否显示内容列下拉框
showRefresh: true,//是否显示刷新按钮
showExport:true,//是否能看到导出按钮
exportDataType: "selected",//选中导出还是全部导出
exportTypes:['excel','xlsx'],//导出文件的后缀
exportOptions:{
fileName: '未上架书籍',
},
columns: [
{ checkbox: true},
{ field:'BOOK_NAME',title:'书名',align: 'center',valign: 'middle'},
{ field:'BOOK_AUTHOR',title:'作者',align: 'center',valign: 'middle'},
{ field:'BOOK_PRICE',title:'价格',align: 'center',valign: 'middle'},
{ field:'PUBLISHING',title:'出版社',align: 'center',valign: 'middle'},
{ title:'书籍图片',align: 'center',valign: 'middle',formatter:function(value,row,index){
if (row.ID != 0) {
return "![]("+$("#contextPath").val()+"/images/"+row.FILE_NAME+"."+row.MIME+")
";
}
return "无";
}},
{ title:'操作',align: 'center',valign: 'middle',formatter:function(value,row,index){
if (row.ID != 0) {
return "";
}
else{
return "";
}
}}
],
onPostBody : function(){//为复选框增加居中,表格加载完后(在表格 body 渲染完成后触发。)
$(".bs-checkbox").css({'text-align':'center','vertical-align':'middle'});
}
});
})
//增加书籍
function addBook(){
//清空表单缓存（window.top是为了获取到父窗体，如果不用的话，那么模态框的作用效果只会作用在booklist.jsp上，
//也就是说模态框弹出覆盖面只出现在右侧，极不美观。所以模态框的html代码也是定义在index.jsp上）
window.top.$("#book_id").val('');
window.top.$("#book_name").val('');
window.top.$("#book_category_id").val(-1);
window.top.$("#book_author").val('');
window.top.$("#book_price").val('');
window.top.$("#publishing").val('');
window.top.$("#book_desc").val('');
window.top.$("#id").val('');
window.top.$('#myModal').modal('show');
window.top.$('#submit').unbind("click");
window.top.$('#submit').click(function(){
var ps = window.top.$("#form").serialize();
$.post($("#contextPath").val()+"/bookAction.action?methodName=addBook",ps,function(data){
if (data) {
alert("增加成功");
window.top.$('#myModal').modal('hide');
$('#table').bootstrapTable('refresh');
}
else{
alert("增加失败");
}
});
})
}
//删除书籍
function deleteBook(){
var rows = $('#table').bootstrapTable('getSelections');
if (rows.length != 0) {
if (confirm("您确定要删除该书籍?")) {
$.post($("#contextPath").val()+"/bookAction.action?methodName=deleteBook",{"book_id":rows[0].BOOK_ID},function(data){
if (data) {
alert("删除成功!");
$('#table').bootstrapTable('refresh');
}
else{
alert("删除失败!");
}
});
}
}
else{
alert("请选择要删除的书籍");
}
}
//修改书籍
function updateBook(){
var rows = $('#table').bootstrapTable('getSelections');
if (rows.length != 0) {
window.top.$("#book_id").val(rows[0].BOOK_ID);
window.top.$("#book_name").val(rows[0].BOOK_NAME);
window.top.$("#book_category_id").val(rows[0].BOOK_CATEGORY_ID);
window.top.$("#book_author").val(rows[0].BOOK_AUTHOR);
window.top.$("#book_price").val(rows[0].BOOK_PRICE);
window.top.$("#publishing").val(rows[0].PUBLISHING);
window.top.$("#book_desc").val(rows[0].BOOK_DESC);
window.top.$("#id").val(rows[0].ID);
window.top.$('#myModal').modal('show');
window.top.$('#submit').unbind("click");
window.top.$('#submit').click(function(){
var ps = window.top.$("#form").serialize();
$.post($("#contextPath").val()+"/bookAction.action?methodName=editBook",ps,function(data){
if (data) {
alert("修改成功");
window.top.$('#myModal').modal('hide');
$('#table').bootstrapTable('refresh');
}
else{
alert("修改失败");
}
});
})
}
else{
alert("请选择要修改的书籍");
}
}
//打开上传模态框
function showUploadModal(book_id){
//清空文件上传器
window.top.$("#uploadfile").html("");
window.top.$("#uploadfile").append("");
//文件上传器初始化
window.top.$("#ff").fileinput({
language: 'zh',
uploadUrl: $("#contextPath").val()+"/uploadFile.do",
uploadExtraData : {"book_id":book_id},
uploadAsync: true,//异步上传
showUpload:true, //是否显示上传按钮
showRemove :true,//显示移除按钮
showPreview :true, //是否显示预览
showCaption:true,//是否显示标题
showClose:false,//是否显示关闭按钮
browseClass:"btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
maxFileCount:3,//表示允许同时上传的最大文件个数
enctype:'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "您要上传的文件数量超过最大值",
}).on("fileuploaded", function (event, data, previewId, index){
if (data.response == "success") {
$('#table').bootstrapTable('refresh');
setTimeout(function(){
window.top.$("#myModal1").modal("hide");
}, 2000);
}
});
//模态框激活
window.top.$("#myModal1").modal();
}
//文件下载
function downloadFile(fileName){
location.href = $("#contextPath").val()+"/downloadFile.do?fileName="+fileName;
}
//数据导入
function importBook(){
//清空文件上传器
window.top.$("#uploadfile1").html("");
window.top.$("#uploadfile1").append("");
//文件上传器初始化
window.top.$("#fff").fileinput({
language: 'zh',
uploadUrl: $("#contextPath").val()+"/importData.do",
allowedFileExtensions: ["xls", "xlsx"],
uploadAsync: true,//异步上传
showUpload:true,
showRemove :true,
showPreview :true,
showCaption:true,
showClose:false,
browseClass:"btn btn-primary",
dropZoneEnabled: true,
maxFileCount:3,
enctype:'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "您要上传的文件数量超过最大值",
previewFileIcon: "",
}).on("fileuploaded", function (event, data, previewId, index){
if (data.response == "success") {
window.top.$("#myModal2").modal('hide');
$('#table').bootstrapTable('refresh');
alert("导入成功!");
}
else{
alert("导入失败!");
}
});
window.top.$("#myModal2").modal();
}
参考的api地址
Bootstrap-treeview: https://blog.csdn.net/shida1009/article/details/77718034
Bootstrap-fileInput:https://blog.csdn.net/u012526194/article/details/69937741#commentsedit
Bootstrap-table: http://bootstrap-table.wenzhixin.net.cn/
Bootstrap-btabs: https://terryz.github.io/btabs/docs.html
Bootstrap: https://v3.bootcss.com/
菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html