我的Blazor视图中有一个表,它根据从选中框中选择的品牌显示记录。内联表编辑也是存在的,但是如果您单击记录进入rowedit模式,并且将选中框中的值更改为由另一个品牌筛选,则编辑模式将保持打开状态,并且在退出该模式之前记录不会更改。有办法解决这个问题吗?
我的代码:
<MudSelect @bind-Value="@selectedBrand" Label="Select Brand" Variant="Variant.Filled" >
@foreach (var item in brand) {
<MudSelectItem Value="@item.Id">@item.Description</MudSelectItem>
}
</MudSelect>
<MudTable @ref="brandPrices" Dense="true" Height="750px" Elevation="25" Items="FilteredBrands" @bind-customer="brandPrices" CanCancelEdit="@canCancelEdit"
CommitEditTooltip="Commit Edit" OnCommitEditClick="Save" Hover="@hover" Bordered="@bordered" Striped="@striped" HorizontalScrollbar="true"
RowEditPreview="BackupItem" RowEditCancel="ResetItemToOriginalValues" IsEditRowSwitchingBlocked="@blockSwitch" ApplyButtonPosition="@applyButtonPosition" Filter="new Func<BrandViewModel,bool>(FilterFunc)">
<HeaderContent>
<MudTh Style="text-align:center" Class="pa-0"><MudTableSortLabel Style="text-align:center" SortBy="new Func<BrandViewModel, object>(x=>x.Model)">Model</MudTableSortLabel></MudTh>
<MudTh Style="text-align:center" Class="pa-0"><MudTableSortLabel SortBy="new Func<BrandViewModel, object>(x=>x.Description)">Description</MudTableSortLabel></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd Style="text-align:center" Class="pa-0 mud-theme-primary" DataLabel="Model" @onclick="@(()=>Edit(@context.BrandId))">@context.Model</MudTd>
<MudTd Class="pa-0" Style="text-align:center" DataLabel="Product Description" @onclick="@(()=>Edit(@context.BrandId))">@context.Description</MudTd>
</RowTemplate>
<RowEditingTemplate>
<MudTd Style="text-align:center;" Class="pa-0 mud-theme-primary" DataLabel="Model">@context.Model</MudTd>
<MudTd Style="text-align:center" Class="pa-0" DataLabel="Description">
<MudTextField Style="font-weight:bold;" @bind-Value="@context.Description" Required="true" RequiredError=""</MudTd>
</RowEditingTemplate>
</MudTable>
@code{
private List<BrandViewModel> FilteredBrands => !string.IsNullOrEmpty(selectedBrand)
? brandPrices.Where(s => s.Model == selectedBrand).ToList()
: brandPrices;
// here is where I am not sure how to implement the SetEditingItem snippet
}
我对这件事不熟悉。如果我问错了,我很抱歉,如果问错了,请告诉我如何改进。谢谢
发布于 2022-10-10 09:43:36
要解决问题,需要以编程方式清除编辑模式,以避免在编辑模式处于活动状态时单击其他选择选项时不更新新记录。按以下方式更新您的代码,并查看下面我提供的一个工作示例和一个演示。
<MudTable @ref="brandPricesTable"
@bind-SelectedItem="selectedItem"...></MudTable>
@code {
MudTable<BrandViewModel> brandPricesTable;
private BrandViewModel selectedItem;
private string _selectedBrand;
public string selectedBrand
{
get => _selectedBrand;
set
{
// executed whenever selection option is changed
_selectedBrand = value;
if (brandPricesTable is not null)
{
ResetItemToOriginalValues(selectedItem); // reset to original values
brandPricesTable.SetEditingItem(null); // clear edit mode
}
}
}
}
在线演示示例:
https://try.mudblazor.com/snippet/wumcFEFcGxhafhCq
输出示例:
代码示例:
@page "/"
@inject ISnackbar Snackbar
<MudSelect @bind-Value="selectedBrand"
Label="Select a brand"
Variant="Variant.Outlined"
Class="mb-5"
Placeholder="Please Select">
@foreach (var brand in Brands)
{
<MudSelectItem Value="@brand">@brand.Name</MudSelectItem>
}
</MudSelect>
<MudTable @ref="productTable" Items="@filteredProducts"
Hover="true" CanCancelEdit="true"
Filter="new Func<Product, bool>(FilterFunc)"
@bind-SelectedItem="selectedProduct"
SortLabel="Sort By"
CommitEditTooltip="Commit Edit"
OnCommitEditClick="@(() => Snackbar.Add("Product edit committed"))"
RowEditPreview="BackupItem"
RowEditCancel="ResetItemToOriginalValues"
RowEditCommit="ItemHasBeenCommitted"
IsEditRowSwitchingBlocked="true">
<ToolBarContent>
<MudText Typo="Typo.h6">Products</MudText>
<MudSpacer/>
<MudTextField @bind-Value="searchString"
Placeholder="Search"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
IconSize="Size.Medium" Class="mt-0">
</MudTextField>
</ToolBarContent>
<HeaderContent>
<MudTh>
<MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Product, object>(x => x.Name)">Name</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<Product, object>(x => x.PkgSize)">Package Size</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<Product, object>(x => x.Qty)">Quantity</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<Product, object>(x => x.Sku)">Sku</MudTableSortLabel>
</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Package Size">@context.PkgSize</MudTd>
<MudTd DataLabel="Quantity">@context.Qty</MudTd>
<MudTd DataLabel="Sku">@context.Sku</MudTd>
</RowTemplate>
<RowEditingTemplate>
<MudTd DataLabel="Name">
<MudTextField @bind-Value="@context.Name" Required/>
</MudTd>
<MudTd DataLabel="Package Size">
<MudTextField @bind-Value="@context.PkgSize" Required/>
</MudTd>
<MudTd DataLabel="Quantity">
<MudNumericField @bind-Value="@context.Qty" Required/>
</MudTd>
<MudTd DataLabel="Sku">
<MudNumericField @bind-Value="@context.Sku" Required/>
</MudTd>
</RowEditingTemplate>
<PagerContent>
<MudTablePager/>
</PagerContent>
</MudTable>
@code {
MudTable<Product> productTable { get; set; }
private readonly List<string> editEvents = new();
private string searchString = "";
private Product selectedProduct;
private Product elementBeforeEdit;
private readonly List<Brand> Brands = new();
private Brand _selectedBrand;
public Brand selectedBrand
{
get => _selectedBrand;
set
{
_selectedBrand = value;
if (productTable is not null)
{
ResetItemToOriginalValues(selectedProduct);
productTable.SetEditingItem(null);
}
filteredProducts = Products
.Where(x => x.BrandId == value.BrandId).ToList();
}
}
private readonly List<Product> Products = new();
private List<Product> filteredProducts = new();
protected override async Task OnInitializedAsync()
{
Brands.Add(new Brand("Pepsi"));
Brands.Add(new Brand("Dr Pepper"));
Products.Add(new Product("Pepsi (4/6 Packs)", "12oz can", 24, 3017, Brands[0].BrandId));
Products.Add(new Product("Caffeine Free Pepsi", "2l bottle", 8, 3194, Brands[0].BrandId));
Products.Add(new Product("Diet Pepsi Wild Cherry", "2l bottle", 8, 4780, Brands[0].BrandId));
Products.Add(new Product("Diet Dr Pepper", "2l bottle", 8, 3660, Brands[1].BrandId));
Products.Add(new Product("Diet Dr Pepper (24pk Cube)", "12oz can", 24, 19459, Brands[1].BrandId));
Products.Add(new Product("Diet Dr Pepper (2/12 Packs)", "12oz can", 24, 84941, Brands[1].BrandId));
selectedBrand = Brands[0];
}
private void AddEditionEvent(string message)
{
editEvents.Add(message);
StateHasChanged();
}
private void BackupItem(object product)
{
elementBeforeEdit = new Product
{
ProductId = ((Product)product).ProductId,
BrandId = ((Product)product).BrandId,
Name = ((Product)product).Name,
PkgSize = ((Product)product).PkgSize,
Qty = ((Product)product).Qty,
Sku = ((Product)product).Sku
};
AddEditionEvent($"RowEditPreview event: made a backup of Product {((Product)product).Name}");
}
private void ItemHasBeenCommitted(object product)
{
AddEditionEvent($"RowEditCommit event: Changes to Product {((Product)product).Name} committed");
}
private void ResetItemToOriginalValues(object product)
{
((Product)product).Name = elementBeforeEdit.Name;
((Product)product).PkgSize = elementBeforeEdit.PkgSize;
((Product)product).Qty = elementBeforeEdit.Qty;
((Product)product).Sku = elementBeforeEdit.Sku;
AddEditionEvent($"RowEditCancel event: Editing of Product {((Product)product).Name} cancelled");
}
private bool FilterFunc(Product product)
{
if (string.IsNullOrWhiteSpace(searchString))
return true;
if (product.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
return true;
if (product.PkgSize.Contains(searchString, StringComparison.OrdinalIgnoreCase))
return true;
if ($"{product.Qty} {product.Sku}".Contains(searchString))
return true;
return false;
}
public class Brand
{
public Brand(string name)
{
BrandId = Guid.NewGuid();
Name = name;
}
public Guid BrandId { get; set; }
public string Name { get; set; }
}
public class Product
{
public Product(){}
public Product(string name, string pkgSize, int qty, int sku, Guid brandId)
{
ProductId = Guid.NewGuid();
BrandId = brandId;
Name = name;
PkgSize = pkgSize;
Qty = qty;
Sku = sku;
}
public Guid ProductId { get; set; }
public Guid BrandId { get; set; }
public string Name { get; set; }
public string PkgSize { get; set; }
public int Qty { get; set; }
public int Sku { get; set; }
}
}
https://stackoverflow.com/questions/74011180
复制相似问题