首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当显示不同的记录时,可以关闭rowedit模式吗?

当显示不同的记录时,可以关闭rowedit模式吗?
EN

Stack Overflow用户
提问于 2022-10-10 06:56:47
回答 1查看 82关注 0票数 0

我的Blazor视图中有一个表,它根据从选中框中选择的品牌显示记录。内联表编辑也是存在的,但是如果您单击记录进入rowedit模式,并且将选中框中的值更改为由另一个品牌筛选,则编辑模式将保持打开状态,并且在退出该模式之前记录不会更改。有办法解决这个问题吗?

我的代码:

代码语言:javascript
运行
复制
    <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

}

我对这件事不熟悉。如果我问错了,我很抱歉,如果问错了,请告诉我如何改进。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-10 09:43:36

要解决问题,需要以编程方式清除编辑模式,以避免在编辑模式处于活动状态时单击其他选择选项时不更新新记录。按以下方式更新您的代码,并查看下面我提供的一个工作示例和一个演示。

代码语言:javascript
运行
复制
<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

输出示例:

代码示例:

代码语言:javascript
运行
复制
@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; }
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/74011180

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档