Boostrap 3

Question

我刚刚发现当我试图找到类似.row-link之类的东西时有一个扩展引导程序，所以当我在我的桌子上实现它时，我似乎无法在我点击时调用一个模态每一行。不会调用boostrap中的模态。我真的无法追踪为什么当我调试（使用firebug）页面时， td标记，其中我将标记，我的标记链接无法看到。显示的那个只是值。例如<a> some link </a>

某些链接是我在firebug上看到的唯一内容，通常在我调试时我会看到所有的html标记，如<a href="some link" data-toggle="modal" data-target="some taget"> click me </a> 但我真的不知道为什么我不能使用row-link

来调用模态

再次，我点击1行模式框时的目标

这是我的代码段

<table>
   <thead>
        // some headers
   </thead>
   <tbody data-provides="rowlink">
      <tr>
        <td><a href="#myModal" data-toggle="modal" data-target="modal">Click me</a> </td>
        <td>/*some data*/</td>
        <td>/*some data*/</td>
      </tr>
   </tbody>
</table>

<div id="myModal" /*some legit modal attr please see bootstrap site i just copied them*/>
    <div>
        MODAL HEADER
    </div>

    <div>
        MODAL BODY
    <div>

    <div>
        MODAL FOOTER
    <div>
</div>

当我尝试这一项时，请注意此链接位于表格html标记

之外

<a href="#myModal" data-toggle="modal" data-targe="modal">Click me</a>

任何人都知道如何在行链接中实现模态视图请分享

Answer 1

如果你检查这个link，下面的代码从链接获取href，并在点击行时将window.location更改为href，因此它需要一个URL。

var href = link.attr('href')

$(this).find('td').not('.nolink').click(function() {
   window.location = href;
})

此外，代码中还提到了被剥离的<a>标记。

link.replaceWith(link.html())

解决这个问题的一个解决方案是手动编写一个脚本，在该脚本中，您将定位具有模态的行，并将所需的属性添加到该行。见Fiddle。在这里，我给了一个类.rowlink-modal到一个人想要点击的类，并在脚本中定位该类并添加数据属性。

$('.rowlink-modal').each(function(){
 $(this)
   .attr('data-toggle','modal')
   .attr('data-target','#myModal');
});

单击“动作”链接将打开modal2，当您单击整行时，将打开第一个模态。

Answer 2

Boostrap 3

这与Bootstrap 3开箱即用。

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-link="row" class="rowlink">
        <tr>
            <td><a href="#myModal" data-toggle="modal">Modals</a></td>
            <td>some text</td>
            <td class="rowlink-skip"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

Bootstrap 2

目前，rowlink不能用于触发点击链接时发生的JavaScript事件。它只会使用location.href打开网址。这将在未来修复。

但是，在这种情况下，不需要使用rowlink。您可以为每个data-toggle="modal"添加tr并添加属性data-target，而不是使用href。

要获得rowlink样式效果，请将rowlink类添加到tr。

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowlink" data-target="#myModal" data-toggle="modal">
            <td>Modals</td>
            <td>some text</td>
            <td class="nolink"><a href="#myModal2" data-toggle="modal">Action</a></td>
        </tr>
    </tbody>
</table>

Jasny Bootstrap rowlink模态调用

2 个答案:

Boostrap 3

Bootstrap 2

See the fiddle