我想在桌子上做一个弹出窗口。告诉我该怎么做。 这是我的代码。来自数据库的数据。
$("[data-toggle=popover]").popover({
trigger: 'manual',
animate: false,
html: true,
placement: 'left',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
});<table id="table" data-toggle="table" data-cache="false" data-show-columns="false" ata-click-to-select="true" data-toolbar="#toolbar" data-search="true" data-pagination="true" data-page-size="500" data-show-refresh="false" data-url="data.php" data-detail-view="true" data-filter-control="true" data-detail-formatter="detailFormatter">
<thead class="btn-success">
<th data-field="zdjecie" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover" data-formatter="imageFormatter" data-sortable="true" data-tooltip="true" > </th>
<th data-field="marka" data-sortable="true" class="text-center" >Marka</th>
<th data-field="model" data-sortable="true" class="text-center" >Model</th>
<th data-field="lcd" data-sortable="true" class="text-center">Wyświetlacz</th>
<th data-field="cena" data-sortable="true" class="text-center" >Cena</th>
<th data-field="numermodelu" data-sortable="true" class="text-center" >Numer Modelu</th>
<th data-field="rodzajLCD" data-sortable="true" class="text-center">Rodzaj Wyświetlacza</th>
<th data-field="ppi" data-sortable="true" class="text-center" >Nasycenie</th>
<th data-field="rozdzielczosc" data-sortable="true" class="text-center" >Rozdzielczość</th>
<th data-field="najnizszacena"> </th>
</thead>
</table>
答案 0 :(得分：0)
这个代码是检查吗？
function initTable() {
// sometimes footer render error.
setTimeout(function () {
$table.bootstrapTable('resetView');
}, 200);
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
selections = getIdSelections();
});
$table.on('expand-row.bs.table', function (e, index, row, $detail) {
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', function (res) {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args);
});
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
$(window).resize(function () {
$table.bootstrapTable('resetView', {
height: getHeight()
});
});
}
function imageFormatter(value, row) {
return '<a class="pop" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>" data-original-title="" title="aaa"><img src="'+value+'" width= "50px" height= "50px" /></a>';
}
function detailFormatter(value, row) {
return '<p class="text-left" ><img src="images/ceneo.png">Sprawdź na ceneo cena od <a href="'+row.cena+'">'+row.cena+row.marka+ row.model+' </a></p>';
}
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
function totalTextFormatter(data) {
return 'Total';
}
function totalNameFormatter(data) {
return data.length;
}
function totalPriceFormatter(data) {
var total = 0;
$.each(data, function (i, row) {
total += +(row.price.substring(1));
});
return '$' + total;
}
function getHeight() {
return $(window).height() - $('h1').outerHeight(true);
}
$(function () {
var scripts = [
location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
],
eachSeries = function (arr, iterator, callback) {
callback = callback || function () {};
if (!arr.length) {
return callback();
}
var completed = 0;
var iterate = function () {
iterator(arr[completed], function (err) {
if (err) {
callback(err);
callback = function () {};
}
else {
completed += 1;
if (completed >= arr.length) {
callback(null);
}
else {
iterate();
}
}
});
};
iterate();
};
eachSeries(scripts, getScript, initTable);
});
function getScript(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState ||
this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
if (callback)
callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
}
};
head.appendChild(script);
// We handle everything using the script element injection
return undefined;
}<div class="table-responsive">
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-search="true"
data-pagination="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-show-toggle="false"
data-show-columns="true"
data-url="data.php"
data-page-size="800"
data-show-pagination-switch="true"
data-pagination="true"
data-url="data.php"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-click-to-select="true" data-search="true" data-pagination="true" data-page-size="100" data-url="data.php" >
<thead class="btn-success">
<th data-field="zdjecie" data-original-title="Title" data-trigger="hover" data-formatter="imageFormatter" data-sortable="true" data-tooltip="true" > </th>
<th data-field="marka" data-sortable="true" class="text-center" >Marka</th>
<th data-field="model" data-sortable="true" class="text-center" >Model</th>
<th data-field="lcd" data-sortable="true" class="text-center">Wyświetlacz</th>
<th data-field="cena" data-sortable="true" class="text-center" >Cena</th>
<th data-field="numermodelu" data-sortable="true" class="text-center" >Numer Modelu</th>
<th data-field="rodzajLCD" data-sortable="true" class="text-center">Rodzaj Wyświetlacza</th>
<th data-field="ppi" data-sortable="true" class="text-center" >Nasycenie</th>
<th data-field="rozdzielczosc" data-sortable="true" class="text-center" >Rozdzielczość</th>
</thead>
</table>