0

我在我的 MVC3 应用程序中实现了一个 jQuery 选项卡，但是其中一个选项卡的大小不正确。也就是说，一些内容在选项卡内，但我下面的奇怪格式只是部分在选项卡内：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Edit Schedule</a></li>
        ...
    </ul>

    <div id="tabs-1">
        ...
        <div id = "scheduleData">
            @Html.Partial("_partialView", ViewData["data"])
        </div>
    </div>

    ...
</div>

我的局部视图呈现了许多表，一个只有一个头部，其余的嵌套在一个 jQuery 可选列表中：

<table>
    <thead>
        <tr>
            <td>ID</td>
            ...
        </tr>
    </thead>
</table>

<ol id="selectable>
    @foreach (var obj in Model)
    {
        <li class="ui-widget-content">
            <table>
                <tr>
                    <td>@obj.ID</td>
                    ...
                </tr>
            </table>
        </li>
    }
</ol>

我不确定标签大小问题是否由于部分视图或我非常奇怪的格式或两者兼而有之。

值得注意的是，只有第一个表在选项卡内，其他任何表始终不在选项卡内，无论局部视图有多大或多小。

这显然是一个草率的解决方案，我想知道是否有更好的方法在可选列表中呈现表格行，以便正确调整 jQuery 选项卡的大小，例如在第一个表格中包含所有行？（据我所知，这不起作用，因为您不能在表格中嵌套可选列表）感谢您的意见。

4

1 回答 1

0

有可能使表格成为可选项目，而不是每一行，但由于格式问题，我采用了以下解决方案：

$(document).ready(function () {
    $("#scheduleTable tr").click(function () {
        var href = $(this).find("a").attr("href");
        if (href) {
            $("#editDialog").dialog({ modal: true });
        }
    });
});

然后，该标记在每一行中都有一个编辑链接，Javascript 监视该链接，然后创建一个 jQuery 对话框。

<table>
    <thead>
        <th>&nbsp;</th>
        ...
    </thead>

    <tbody>
        @foreach (var obj in Model) 
        {
            <tr>
                <td><a href="#">Edit</a></td>
                ...
            </tr>
        }
    </tbody>
</table>

<div id="editDialog" title="Edit Entry" style="display:none">
    ...
</div>
于 2012-07-03T15:21:34.000 回答