使用 Blazor 的简单可扩展表

Question

我想在 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>

如果我单击包含详细信息的行，它也总是会折叠。有没有一种不使用外部组件的简单方法来实现它？如果不是，您推荐什么组件？

我所说的“可扩展表”的一个例子在这里。

Answer 1

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

如果您想展开/折叠行，Blazor 有两种选择。

1. 通过将 IJSRuntime 注入页面并调用InvokeAsync().

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>

Answer 2

我想出了一个基于来自 Blazor 服务器模板的默认“WeatherForecast”的解决方案。基本思想是在模型中放置一个用于表示表数据的标志。

WeatherForecast.cs

public class WeatherForecast
{
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string Summary { get; set; }

    //new fields added below
    public bool IsRowExpanded { get; set; } = false;

    public string ExpandableContent { get; set; } = "Lorem Ipsum";
}

获取数据.razor

<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr @onclick="() => forecast.IsRowExpanded = !forecast.IsRowExpanded">
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
            if (forecast.IsRowExpanded)
            {
                <tr>@forecast.ExpandableContent</tr>
            }
        }
    </tbody>
</table>

当您单击一行（例如第二行）时，它将如下所示：