引導表-彈出框 <th> 與圖像和HTML

Question

我想在表中做一個彈出窗口。 告訴我該怎么做。 這是我的代碼。 來自數據庫的數據。

 $("[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> 

Answer 1

而此代碼是檢查？

  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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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>