单击链接时需要禁用表

I have a bootstrap 3 table which contains links. What i'm after is to disable the table when one of the links are click and also for the table to give the user a visual that the table is disabled (e.g. turn to a light transparent gray color and make the other links none underline when hovered over.

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

The code below is how my table is populated

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

<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>

The below Java is what I have tried and it appears to work

下面的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")
};

But although this disables the links in the table, it does not give the user the impression the table is disabled.

但是,尽管这会禁用表中的链接,但它不会给用户留下禁用表的印象。

As I said I want it to display some sort of transparent gray box over the table. How do I achieve this using css and/or jquery

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

5 个解决方案

#1

CSS:

.table-inactive {
    opacity: 0.6;
}

javascript:

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

or jQuery:

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

That should do it, it doesn't cover the table, but it will appear faded out with the opacity. (place the CSS/JS where you need/want it)

应该这样做,它不会覆盖表格,但它会显示淡化与不透明度。 (将CSS / JS放在您需要/想要的地方)

#2

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

};

#3

Try this . I am writing a generic solution . Hope this may help :-

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

Lets say your bootstrap table contains 3 links

让我们说你的引导表包含3个链接

First Solution : modal-backdrop in

第一个解决方案:模态背景

I guess you are having bootstrap.css in your application . Keeping that in mind :- There is a class that bootstrap3 provides modal-backdrop in . Add a div containing this class before your <table> like this :-

我猜你的应用程序中有bootstrap.css。记住这一点: - 有一个类bootstrap3提供模态背景。在

之前添加一个包含此类的div,如下所示: -

$("#lnk1,#lnk2,#lnk3").on("click",function(){

     $("#tableId").before("<div class='modal-backdrop  in'></div>");

 });

I have a personal experience with this feature .

我对此功能有个人经验。

Second Solution : Opacity

第二个解决方案:不透明度

 $("#lnk1,#lnk2,#lnk3").on("click",function(){

     $("#tableId").css({'opacity':'0.4'});

 });

Hope this would help you .

希望这会对你有所帮助。

Cheers !!

#4

Just Drop the opacity of the table to the half and then make the colors of link text to some light like grey so that it could give the feel like disabled.

只需将表格的不透明度降低到一半,然后将链接文本的颜色设置为像灰色一样的光线,这样就可以给人一种像残疾人一样的感觉。

#5

Decided to use the modal which works perfectly

决定使用完美的模态

#1