Question

我有一张表格，显示每个订单中的许多错误。每行显示特定顺序的错误数量。我想在该行的末尾添加一个“查看”按钮，当用户单击它时，该行将像手风琴一样展开并显示错误列表。

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     3          C              2             See

用户单击第2行上的“查看”按钮

 OrderId    Order From   Number of Error    Button
 ---------------------------------------------------
     1          A              4             See
     2          B              3             See
     Error 1- 
     Error 2-
     Error 3-
     3          C              2             See

我不知道如何将行与相关错误关联/链接

 @{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
<a class="btn btn-warning" data-toggle="collapse" href="#@i" role="button" aria-expanded="false" aria- 
controls="multiCollapseExample:@i">Toggle</a>
                </td>
            </tr>
            <tr class="collapse multi-collapse" id="@i">
                <td colspan="3">
                    Error 1
                    Error 2
                    Error 3
                </td>
            </tr>

enter code here

我知道我需要将anchor href =“＃”标记设置为class =“ collapse multi-collapse” id =“”，但是Bootstrap不喜欢如果我以“ 1abc”或“ abc”开头的数字： 1“。我不能以数字开头，也不能在ID或href内使用“：”。

我很累“ abc @ {i}”，它说我是变量，不能那样使用尝试了这个“ abc：@i”，没有错误，但是没有用，也是“：@iabc”或只是“ @i”

Answer 1

如果正在创建tr，则可以显示隐藏下一个tr。使用jquery可以轻松切换下一个tr。

@{int i = 0;}
 @foreach (var item in Model.OrderList)
 {
     i++;
     <tr>
        <td>
            @Html.DisplayFor(ID)
        </td>
        <td>
             @Html.DisplayFor(FROM)
        </td>
        <td>
            @Html.DisplayFor(NumberOfError)
        </td>
        <td class="text-right">
        <button type="button" class="btn btn-primary btn-sm" onclick="changeToggle(this)">See <i class="fa fa-arrow-down" ></i></button>
                </td>
            </tr>
        <tr class="collapse" style="display:none;">
            <td colspan="3">
                Error 1
                Error 2
                Error 3
            </td>
        </tr>
        }
<script>


function changeToggle(btn){
        $(btn).find(i).removeClass("fa-arrow-up");
        $(btn).find(i).removeClass("fa-arrow-down");
    if($(btn).closest( "tr" ).next().css('display') == 'none'){
        $(btn).find(i).addClass("fa-arrow-down");
        $(btn).find(i).removeClass("fa-arrow-up");
    }else{
        $(btn).find(i).removeClass("fa-arrow-down");
        $(btn).find(i).addClass("fa-arrow-up");
    }
    $(btn).closest( "tr" ).next().toggle();
}

    </script>

设置具有特定ID的Bootstrap手风琴

1 个答案: