MudBlazor: Jak vytvořit vlastní stůl s MudTable pomocí colspan a rowspan?

Question 1

Chtěl Bych převést svůj předchozí html tabulky uvedené níže MudTable. Ale nemůžu přijít na to, jak to udělat pomocí MudBlazor knihovna. V HTML jsem použil rowspan a colspan k dosažení tabulce níže. Jsem nový pomocí Mudblazor knihovny, ale hledal jsem hodně najít řešení pro to, ale nemohl jsem najít. Doufám, že někdo mi může pomoci.

Cílová Tabulka

Můj pokus

<MudTable Items="@selectedDriver.Capability.cActions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true" ReadOnly="@dronly" CanCancelEdit="@true"
      RowEditPreview="BackupActionItem"
      RowEditCancel="ResetActionItemToOriginalValues"
      RowEditCommit="ActionItemHasBeenCommitted"
      CustomHeader="@true"
      @ref="actionTable">
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No.</MudTh>
        <MudTh>Action</MudTh>
        <MudTh colspan="2">Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    @foreach (var item in context.Parameters.Select((value, i) => new { i, value }))
    {
        var index = item.i;
        var parameter = item.value;
        var paramCount = context.Parameters.Count();

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="No.">*</MudTd>
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.Name</MudTd>
        }

        <MudTd DataLabel="Parameter">@parameter.Name</MudTd>
        <MudTd DataLabel="Type">@parameter.Type.ToString()</MudTd>

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.ReturnType.ToString()</MudTd>
        }
    }
</RowTemplate>

Výsledek

Question 2

Doporučuji vám vložit další <table> v řádku šablony. Tady je rybička pro vás hrát s: https://try.mudblazor.com/snippet/ckGPPbwepSPTlFpg

To vypadá takto:

Kompletní příklad:

<MudTable Items="@actions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true"  CanCancelEdit="@true"
      CustomHeader="@true"
      >
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No</MudTh>
        <MudTh>Action</MudTh>
        <MudTh>Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="No">@context.No</MudTd>
    <MudTd DataLabel="Action">@context.Action</MudTd>
    <MudTd DataLabel="Parameters">
        <table>
            @foreach (var p in context.Params)
            {
               <tr  style="border: 1px solid silver;  border-collapse: collapse;">
                   <td class="pa-1">@p.No</td>
                   <td class="pa-1">@p.Name</td>
                   <td class="pa-1">@p.Type</td>
               </tr>     
            }
        </table>
    </MudTd>
    <MudTd DataLabel="ReturnType">@context.ReturnType</MudTd>
</RowTemplate>

</MudTable>

@code {
    public class MyAction {
        public int No {get; set;}
        public string Action {get; set;}
        public List<Param> Params {get; set;} = new List<Param>();
        public string ReturnType {get; set;} = "void";
    }
    public class Param {
        public int No {get; set;}
        public string Name {get; set;}
        public string Type {get; set;}="string";
    }

    List<MyAction> actions = new List<MyAction>() {
        new MyAction { No = 1, Action="HelloWorld",  },
        new MyAction { No = 2, Action="SomeFunction",  Params=new List<Param> {
                new Param { No=1, Name="param1", },                
                new Param { No=2, Name="param2", },                
                new Param { No=3, Name="param3", },                
                new Param { No=4, Name="param4", },                
            },
        },
    };
}

henon · Answer 1 · 2021-11-24T15:03:56

Doporučuji vám vložit další <table> v řádku šablony. Tady je rybička pro vás hrát s: https://try.mudblazor.com/snippet/ckGPPbwepSPTlFpg

To vypadá takto:

Kompletní příklad:

<MudTable Items="@actions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true"  CanCancelEdit="@true"
      CustomHeader="@true"
      >
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No</MudTh>
        <MudTh>Action</MudTh>
        <MudTh>Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="No">@context.No</MudTd>
    <MudTd DataLabel="Action">@context.Action</MudTd>
    <MudTd DataLabel="Parameters">
        <table>
            @foreach (var p in context.Params)
            {
               <tr  style="border: 1px solid silver;  border-collapse: collapse;">
                   <td class="pa-1">@p.No</td>
                   <td class="pa-1">@p.Name</td>
                   <td class="pa-1">@p.Type</td>
               </tr>     
            }
        </table>
    </MudTd>
    <MudTd DataLabel="ReturnType">@context.ReturnType</MudTd>
</RowTemplate>

</MudTable>

@code {
    public class MyAction {
        public int No {get; set;}
        public string Action {get; set;}
        public List<Param> Params {get; set;} = new List<Param>();
        public string ReturnType {get; set;} = "void";
    }
    public class Param {
        public int No {get; set;}
        public string Name {get; set;}
        public string Type {get; set;}="string";
    }

    List<MyAction> actions = new List<MyAction>() {
        new MyAction { No = 1, Action="HelloWorld",  },
        new MyAction { No = 2, Action="SomeFunction",  Params=new List<Param> {
                new Param { No=1, Name="param1", },                
                new Param { No=2, Name="param2", },                
                new Param { No=3, Name="param3", },                
                new Param { No=4, Name="param4", },                
            },
        },
    };
}

Vaše řešení funguje, jen jsem přidal pár styling na to a vypadá skvěle. Děkuji

MudBlazor: Jak vytvořit vlastní stůl s MudTable pomocí colspan a rowspan?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii