Question

我有一个包含链接的bootstrap 3表。我所追求的是当其中一个链接被点击时禁用该表，并且还为该表提供用户视觉禁用该表的视觉（例如，转向浅透明的灰色颜色并使其他链接没有下划线时徘徊过来。

以下代码是我的表格填充方式

<table class="table table-hover table-striped hidden-xs" id="clientListTable">
                <tr><%
                foreach (var cell in data.Header.Cells)
                {
                    var showFilterOption = (cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Currency || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Double || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Integer);
                    var filterIcon = ResolveUrl("~/Resources/Images/Interface/filter_icon.png");
                    var sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending.ToString();
                    if (data.ColumnSort == cell.SortOn && data.ColumnSortDirection == AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending)
                    {
                        sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Descending.ToString();
                    }
                    %>
                    <th>
                        <a href="<%=Html.GenerateLoopBackUrl(true, new { ClientList_SortOn = cell.SortOn, ClientList_SortDirection = sortDirection })%>"><%=cell.Value%></a>
                        <%if (showFilterOption)
                            { %> 
                                <a href="#" id="<%:cell.ColumnIdentifier%>_link" class="noPdf">
                                    <span class="glyphicon glyphicon-filter" id="<%:cell.ColumnIdentifier%>_img"></span>
                                </a>
                                <%--<img src="<%= filterIcon%>" alt="add filter" id="<%:cell.ColumnIdentifier%>_img" />--%>
                        <%}%>
                    </th>
                <% }%> 
                </tr>

                <%Int32 count = 0;
                    foreach (var row in data.Rows)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in row.Cells)
                            {
                                    if (cell.Hidden) { }
                                    else {%><td onclick="return clickDisableFunction();"><%=cell.Value%></td><%}
                            }
                        %>
                    </tr>
                    <%
                    count++;
                    } 
                    if (data.ShowTotal)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in data.Total.Cells)
                            { 
                                %><td><strong><%=cell.Value%></strong></td><%
                            }
                        %>
                    </tr>
                <% }%>
                </table>

以下Java是我尝试过的，它似乎可以工作

    function RedirectClientView()
{
    //document.location.href = $('Views_DropDownList').value;
    document.location.href = document.getElementById('Views_DropDownList').value;
}
var clickedOnce = false;

function clickDisableFunction()
{
    if (clickedOnce == true)
    {
        return false;
    };
    clickedOnce = true;
    document.getElementById('clientListTable').setAttribute("disabled","true")
};

但是虽然这会禁用表格中的链接，但它不会给用户留下表格被禁用的印象。

正如我所说，我希望它在桌子上方显示某种透明的灰色框。如何使用css和/或jquery

实现此目的

Answer 1

CSS：

.table-inactive {
    opacity: 0.6;
}

的javascript：

var table = document.getElementById("clientListTable")
    table.className = table.className + " table-inactive";

或jQuery：

var $table = $("#clientListTable");
    $table.addClass("table-inactive");

应该这样做，它不会覆盖桌面，但它会显得淡淡不透明。 （将CSS / JS放在您需要/想要的地方）

Answer 2

试试这个。我正在写一个通用的解决方案。希望这可能有所帮助： -

Lets say your bootstrap table contains 3 links

第一个解决方案： modal-backdrop in

我猜你的应用程序中有bootstrap.css。记住这一点： - 有一个班级bootstrap3在中提供模态背景。在<table>之前添加包含此类的div： -

$("#lnk1,#lnk2,#lnk3").on("click",function(){ $("#tableId").before("<div class='modal-backdrop in'></div>"); });

我对此功能有个人经验。

第二个解决方案： Opacity

$("#lnk1,#lnk2,#lnk3").on("click",function(){ $("#tableId").css({'opacity':'0.4'}); });

希望这会对你有所帮助。

干杯!!

Answer 3

function clickDisableFunction()
{
    if (clickedOnce == true)
    {
        return false;
    };
    clickedOnce = true;
    $("#clientListTable").css( "opacity":"0.6" );
    document.getElementById('clientListTable').setAttribute("disabled","true")

};

Answer 4

只需将表格的不透明度降低到一半，然后将链接文字的颜色变为灰色的某些光线，这样就可以让人感觉像是禁用了。

Answer 5

决定使用完美运作的模式

单击链接时需要禁用表

5 个答案: