带Blazor的简单可扩展工作台 [英] Simple expandable table with Blazor

问题描述

我想在Blazor WebAssembly中创建一个简单的可扩展表。我添加了一些HTML代码，如下所示：

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>User</th>
      <th>Date</th>
      <th>Status</th>
      <th>Reason</th>
    </tr>
  </thead>
  <tbody>
    <tr data-widget="expandable-table" aria-expanded="false">
      <td>183</td>
      <td>John Doe</td>
      <td>11-7-2014</td>
      <td>Approved</td>
      <td>Lorem Ipsum is simply dummy text</td>
    </tr>
    <tr class="expandable-body">
      <td colspan="5">
        <p>
          Lorem Ipsum is simply dummy text
        </p>
      </td>
    </tr>
  </tbody>
</table>

如果我单击包含详细信息的行，它也总是合并的。有没有不使用外部组件就能实现它的简单方法？如果没有，您推荐使用什么组件？

我所说的可展开表&Quot；的一个示例是here。

推荐答案

使用Bootstrap，内置的jQuery/JavaScript代码不会像传统的mvc页面那样开箱即用。

如果要展开/折叠行，可以使用Blazor提供两个选项。

1. 通过将IJSRuntime注入页面并调用InvokeAsync()来调用Bootstrap jQuery/JavaScript。

2. 编写您自己的展开/折叠组件，并将每一行包装在其中-类似于

// CollapsibleTableRow.

<tr @onclick=Toggle>
   @if(_show)
   {
       @ChildContent
   }
</tr>


@code 
{
    [Parameter] public RenderFragment ChildContent { get; set; }
    private bool _show { get; set; } = false;
    
    private void Toggle()
    {
        _show = !_show;
    }
}

使用

<table>
    <tbody>
         @foreach(var item in items)
         {
             <CollapsibleTableRow>
                 <td>@item.Thing</td>
                 <td>@item.Thing2</td>
             </CollapsibleTableRow>
         }
    </tbody>
</table>

这篇关于带Blazor的简单可扩展工作台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！