Bootstrap popover的使用
html
.popover {
max-width: 1200px;
}
<button type="button" class="btn btn-primary btn-w-md showGoodListPopover"
data-container="body"
data-toggle="popover"
data-placement="right"
data-html="true"
data-content="<div>加载中......</div>">
添加关联商品
</button>
JS
// 当弹出框弹出时事件(显示之前)
$('.showGoodListPopover').on('show.bs.popover', function () {
showList()
})
//
function showList(){
// ajax 操作请求数据
const id = parseInt($("#ID").val())
const data = {
id,
}
$.ajax({
url: "/getallrelate",
method: 'POST',
data: JSON.stringify(data),
async: false,
contentType: 'application/json',
success: function (result) {
let trList = ""
console.log(result)
let listHtml = result.data
//将数据设置在弹出框中
$(".showGoodListPopover").attr("data-content", "" + listHtml + "")
})
}
//解决Bootstrap popover手动关闭需要两次单击才能重新打开
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
// 手动关闭弹出框(手动关闭后需要点击两次才能显示)
function closePopover(){
$(".showGoodListPopover").popover("hide")
}
自定义封装
const popoverClass = "progress-popover"
// // 当点击body的非弹出框相关的内容的时候，关闭所有popover
$('body').click(function (event) {
var target = $(event.target);
// 判断自己当前点击的内容;如果当前点击的对象不是popover，则隐藏弹出框
if (target.attr("data-toggle") !== "popover") {
$("[data-toggle='popover']").popover('hide');
}
});
//解决Bootstrap popover手动关闭需要两次单击才能重新打开
$("body").on('hidden.bs.popover', function (e) {
if ($(e.target).data("bs.popover").inState) {
$(e.target).data("bs.popover").inState.click = false;
}
});
//解决Bootstrap popover手动显示后需要两次单击才能关闭
$("body").on('show.bs.popover', function (e) {
if ($(e.target).data("bs.popover").inState) {
$(e.target).data("bs.popover").inState.click = true;
}
});
$(".progress-popover").on('click', function () {
$($("." + popoverClass).data("bs.popover")).each(function (i, v) {
//console.log("v:",v)
$(v).popover('hide')
})
})
$('.' + popoverClass).on('show.bs.popover', function () {
let that=this
//TODO popover弹出前关闭其他popover，保证只有有个弹窗
$("." + popoverClass).each(function (i, v) {
//console.log("v:",v)
if (v!==that){
$(v).popover('hide')
}
})
showPopoverContent(this)
})
//TODO 该方法为popover弹窗内容，自定义替换
function showPopoverContent(obj) {
let no = $(obj).text().trim()
let popoverContent = "<div class='text-center'>加载中......</div>"
const id = parseInt($("#ID").val())
const data = {
id,
"page_index": parseInt($("#page-index").val()),
"page_size": parseInt($("#page-size").val()),
}
$.ajax({
url: decodeURI("/order/sale/show_progress/" + no),
method: 'POST',
data: JSON.stringify(data),
async: false,
contentType: 'application/json',
success: function (result) {
// let trList = ""
// console.log(result)
// $(result.data.rows).each(function (i, v) {
// trList += "<tr>" +
// "<td>" + v.id + "</td>" +
// "<td style=\"width: auto;\">" +
// "<div><img style=\"width: 90px; height: 50px;\" src=\"" + v.https_pic_url + "\" alt=\"\"></div>" +
// "</td>" +
// "<td>" + v.name + "</td>" +
// "<td class=\"text-center\">" +
// "<a href=\"#\" onclick=\"selectGoods(this)\" data-id=\"" + v.id + "\" " +
// "class=\"btn btn-danger m-r-5 pull-left\">选中</a>" +
// "</td></tr>"
// })
// let paginationHtml = relateGoodPaginationHtml(result.data.param.page_index, result.data.param.page_size, result.data.total)
//
//
// popoverContent= "" +
// "<div class=\"\">" +
// " <div class=\"table-responsive\">" +
// "<table class=\"table table-bordered dataTBTbody \" style='margin-bottom: 5px'>" +
// "<thead><td style=\"width: auto;\">id</td><td style=\"width: auto;\">商品图片</td><td style=\"width: auto;\">商品名称</td>" +
// "<td style=\"width: 60px;\" class=\"text-center\">操作</td>" +
// " </thead>" +
// "<tbody id='GoodListTbody'>" + trList + "</tbody></table></div>" +
// "<nav> <ul class=\"pager\" style=\"text-align: left\" id=\"paginationUL\"><li>" +
// "<lable>搜索到<span style=\"color: #0088cc\">" + result.data.total + "</span> 条记录</lable></li> " + paginationHtml + "</ul>" +
// "</nav>" +
// "</div>"
// popoverContent += "<input type=\"hidden\" id=\"page-index\" value=\"" + result.data.param.page_index + "\"/>" +
// "<input type=\"hidden\" id=\"page-size\" value=\"" + result.data.param.page_size + "\"/>" +
// "<input type=\"hidden\" id=\"page-total\" value=\"" + result.data.total + "\"/>"
// $("#page-index").val(result.data.param.page_index)
// $("#page-size").val(result.data.param.page_size)
// $("#page-total").val(result.data.total)
$("." + popoverClass).attr("data-content", "" + popoverContent + "")
}
})
// $("."+popoverClass).attr("data-content", "" + popoverContent + "")
}
//列表分页
function relateGoodPaginationHtml(pageIndex, pageSize, pageTotal) {
// var pageIndex = $("#page-index").val() * 1
// var pageSize = $("#page-size").val() * 1
//var pageTotal = $("#page-total").val() * 1
let paginationHtml = ""
if (pageTotal <= pageSize) {
return paginationHtml
}
// 上一页
var prePageHtml
if (pageIndex == 1) {
prePageHtml = '' +
'<li class="">' +
' <a href="javascript:;">«</a>' +
'</li>'
} else {
prePageHtml = '' +
'<li class="">' +
' <a href="javascript:prePage();">上一页</a>' +
'</li>'
}
paginationHtml += prePageHtml
var totalShowNum = 10;
var startIndex = 1
if (Math.ceil(pageTotal / pageSize) > totalShowNum && pageIndex > totalShowNum / 2) {
startIndex = pageIndex - 5
}
// 页码
for (i = startIndex; i <= Math.ceil(pageTotal / pageSize) && totalShowNum > 0; i++, totalShowNum--) {
var tmpIndexNum
if (i == pageIndex) {
tmpIndexNum = '' +
'<li class="active">' +
' <a href="javascript:;">' + i + '</a>' +
'</li>'
} else {
tmpIndexNum = '' +
'<li class="">' +
' <a href="javascript:numPage(' + i + ');">' + i + '</a>' +
'</li>'
}
paginationHtml += tmpIndexNum
}
// 下一页
var nxtPageHtml
if (pageIndex >= pageTotal / pageSize) {
nxtPageHtml = '' +
'<li class="">' +
' <a href="javascript:;">»</a>' +
'</li>'
} else {
nxtPageHtml = '' +
'<li class="">' +
' <a href="javascript:nextPage();">下一页</a>' +
'</li>'
}
paginationHtml += nxtPageHtml
return paginationHtml
}
function prePage() {
// pageindex -1
var pageIndex = $("#page-index").val() * 1
$("#page-index").val(pageIndex - 1)
// refresh page
$("." + popoverClass).popover('hide')
setTimeout(function () {
$("." + popoverClass).popover('show')
}, 500)
}
function numPage(numPage) {
$("#page-index").val(numPage)
// refresh page
$("." + popoverClass).popover('hide')
setTimeout(function () {
$("." + popoverClass).popover('show')
}, 500)
}
function nextPage() {
// pageindex +1
var pageIndex = $("#page-index").val() * 1
$("#page-index").val(pageIndex + 1)
// refresh page
$("." + popoverClass).popover('hide')
setTimeout(function () {
$("." + popoverClass).popover('show')
}, 500)
}
function changePageSize() {
$("#page-index").val("1")
$("#page-size").val($("#pageSizeSec").val())
$("." + popoverClass).popover('hide')
setTimeout(function () {
$("." + popoverClass).popover('show')
}, 500)
}
网友评论