0

Estoy intentando crear una tabla en la que una fila hace de cabecera de un grupo de filas que vienen a continuación.

Al cargar la tabla se han de ver todas las filas (cabeceras y detalles) y al pulsar en una cabecera, esconderse o "plegarse" sus filas de detalle.

Para ello estoy probando con la clase "collapse" de bootstrap (versión 4).

El código es este:

 <table id="datoscuentas" class="table table-striped table-bordered">
    <thead class="thead-dark">
       <tr>
          <th>Cuenta</th>
          <th>Impuestos</th>
          <th>Transferencias</th>
       </tr>
    </thead>
    <tbody>
    @{
       var empresaTemp = String.Empty;
       for (var i = 0; i < Model.Count; i++)
       {
          if (empresaTemp != Model[i].NomEmpresa)
          {
             <tr>
                <td colspan="8">
                   <span data-toggle="collapse" data-target="#@i">
                      @Html.DisplayFor(x => @Model[i].NomEmpresa, new { @id = "NomEmpresa_" + i, @class = "form-control" })
                   </span>
                </td>
             </tr>
             empresaTemp = Model[i].NomEmpresa;
          }
          <tr id="@i" class="collapse in">
             <td>@Html.TextBoxFor(x => @Model[i].Cuenta, new { @id = "Cuenta_" + i, @class = "form-control" })</td>
             <td>@Html.TextBoxFor(x => @Model[i].Impuestos, new { @id = "Impuestos_" + i, @class = "form-control" })</td>
             <td>@Html.TextBoxFor(x => @Model[i].Transferencias, new { @id = "Transferencias_" + i, @class = "form-control" })</td>

             @Html.HiddenFor(x => @Model[i].CuentaID, new { @id = "CuentaID_" + i })
          </tr>
       }
    }
    </tbody>
 </table>

Pero no me aparecen las filas de detalle y al pulsar en la "empresa" no se despliegan tampoco.

1 respuesta 1

1

he encontrado una solución y la comparto aquí por si a alguien le sirve.

 <table id="datoscuentas" class="table table-striped table-bordered">
     <thead class="thead-dark">
        <tr>
           <th>Cuenta</th><th>Impuestos</th><th>Transferencias</th>
        </tr>
     </thead>
     <tbody>
     @{
        var empresaTemp = String.Empty;
        for (var i = 0; i < Model.Count; i++)
        {
           if (empresaTemp != Model[i].NomEmpresa)
           {
                empresaTemp = Model[i].NomEmpresa;
              <tbody>
                 <tr class="clickable" data-target="#@empresaTemp" aria-controls="@empresaTemp" aria-expanded="false" data-toggle="collapse" >
                    <td colspan="8">
                       <span data-toggle="collapse" data-target="#@i">
                          @Html.DisplayFor(x => @Model[i].NomEmpresa, new { @id = "NomEmpresa_" + i, @class = "form-control" })
                       </span>
                    </td>
                 </tr>
              </tbody>
           }
             <tbody id="@empresaTemp" class="collapse show">
              <tr>
                 <td>@Html.TextBoxFor(x => @Model[i].Cuenta, new { @id = "Cuenta_" + i, @class = "form-control" })</td>
                 <td>@Html.TextBoxFor(x => @Model[i].Impuestos, new { @id = "Impuestos_" + i, @class = "form-control" })</td>
                 <td>@Html.TextBoxFor(x => @Model[i].Transferencias, new { @id = "Transferencias_" + i, @class = "form-control" })</td>

                 @Html.HiddenFor(x => @Model[i].CuentaID, new { @id = "CuentaID_" + i })
              </tr>
             </tbody>
        }
     }
     </tbody>
 </table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.