1

我正在使用 jQuery Datatables 在我的表中显示数据，但想要一个弹出窗口，其中包含每行的更多信息。

我在哪里

我已经能够使用 jQuery 数据表在我的表中获取数据，并且可以在每一行获得弹出窗口。

问题 我只希望一次显示一个弹出窗口，发生的事情是，我有一个代码，其中 onClick 行，我得到弹出窗口，当用户单击另一行时，我得到另一个弹出窗口反对该行。因为我希望用户浏览所有弹出框数据并且用户还单击弹出框上的链接，所以我无法保留弹出框'trigger' : 'hover'，这不允许用户阅读/单击弹出框上的所有数据，但如果我使用手动，它不会自动关闭在该页面上的另一个弹出窗口上打开。

在打开弹出框之前，我尝试过类似的$('#tableid tbody tr').popover('hide');操作（认为这将隐藏与 tr 关联的每个弹出框），但这不起作用，或者更确切地说是阻止弹出框完全打开。

我正在尝试使用 js 来显示弹出框

$('#tableid tbody tr').live('click', function () { if (this.id.length > 0) {

        //$('#tableid tbody tr').popover('hide');
        $(this).popover({
            //'trigger' : 'manual',
            'container': 'body',
            'placement': 'right',
            'title': 'Another Test',
            'content': 'Test'
        }).popover('show');           
    }
});

谁能指导我正确的方向来解决这个问题。

任何帮助将不胜感激。

谢谢

4

3 回答 3

1

您可以使用这样的代码来隐藏任何其他打开的弹出框。

$('[data-toggle=popover]').on('click', function (e) {
   $('[data-toggle=popover]').not(this).popover('hide');
});

可以相应地修改选择器[data-toggle=popover]，因为您正在为每个 TR 创建弹出框。

演示

于 2013-05-13T17:03:09.157 回答
0

每当我需要在每个单元格中切换弹出框时，您都可以使用此方法

$('#viewtable tbody').on('click', 'tr',  function () {
    $("#viewtable tbody tr").removeClass('row_selected');       
    $(this).addClass('row_selected');
    var tr = $(this).closest('tr');
    var selectedData = jDataTable.row(tr).data();
    console.log(selectedData);

    var dataaa = JSON.stringify(selectedData);
    var cont = '<div class="text-center" id="viewdiv"><button class="btn btn-warning" ng-click="viewticketdetails('+selectedData.ticketid+')"\>View Ticket</button><button class="btn btn-info" ng-click="updateticket()">Update Ticket</button></div>';                   

    $(this).popover({
        html: true,
        sanitize: false,
        trigger: 'click',
        placement: 'auto top',
        content : function(){
            return compile(cont)(scope);
        }
    }).popover('toggle');

    $('#viewtable tbody tr').off('click').on('click', function() {
    });
});

希望这会帮助你..让我知道这是否会帮助你

于 2020-05-02T13:47:32.200 回答
0

Try to use :

 $('[data-toggle=popover]').popover({

    trigger:"click"

});

$('[data-toggle=popover]').on('click', function (e) {

    $('[data-toggle=popover]').not(this).popover('hide');

});
于 2019-07-17T09:20:14.947 回答