2

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

一些链接是我在萤火虫上看到的唯一东西，通常当我调试时，我会看到所有的 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>

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

4

2 回答 2

3

如果您检查此链接，下面的代码会从链接中获取 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())

解决这个问题的一个解决方案是手动编写一个脚本，在其中定位将具有模式的行并将所需的属性添加到该行。见小提琴。在这里，我.rowlink-modal为 tr 提供了一个类，该类希望可单击并在脚本中定位该类并添加数据属性。

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

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

于 2013-04-28T18:21:25.803 回答
3

助推器 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>

引导程序 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>

看小提琴

于 2013-04-29T21:17:10.650 回答