Blazor QuickGrid - 尝试双击行或使用按钮

Question

我正在使用 QuickGrid 的预发行版。

我在 Blazor 中有一个用于用户列表的基本 QuickGrid。理想情况下，我希望能够双击用户行来拉出编辑模式。

第一个问题：是否可以以某种方式创建允许双击 QuickGrid 行的代码？我发现它不是很容易包含的功能。

第二：如果这是不可能的（或者不值得），是否有一个 QuickGrid 列的好例子，它将在每一行上创建一个“编辑”按钮，为该特定用户拉出模型？我还设置了过滤器。我不确定这是否会让事情变得复杂。

我可以添加一些代码，但它实际上只是我现在拥有的一个基本的可过滤 QuickGrid。我主要只是检查是否有人知道一些好的例子。

Answer 1

目前（2023年11月）没有内置方式。

但是，借助模板列，您可以添加此内容。 作为示例，我通过悬停创建了整个页面，并通过双击选择了它：

   @page "/"
    @rendermode InteractiveServer
    
    @using Microsoft.AspNetCore.Components.QuickGrid
    
    <h6><b>DoubleClick row to select Person</b></h6>
    <QuickGrid Items="@filteredList" TGridItem="Person">
        <TemplateColumn Title="LastName" Class="td-width" SortBy="GridSort<Person>.ByDescending(x => x.LastName)">
            <div @onmouseover="()=>mouseOver(context.Id)"
                 class="[email protected]">
                <div class="content">@context.LastName @context.Id</div>
            </div>
        </TemplateColumn>
        <TemplateColumn Title="FirstName" Class="td-width" SortBy="GridSort<Person>.ByDescending(x => x.FirstName)">
            <div @onmouseover="()=>mouseOver(context.Id)"
                 class="[email protected]">
                <div class="content">@context.FirstName</div>
            </div>
        </TemplateColumn>
    </QuickGrid>
    <div class="m-4">
        <h6>Details for<br/><b>  @currentItem.FirstName @currentItem.LastName</b></h6>
        <b>Id: @currentItem.Id</b>
    </div>
    <style>    
        [email protected]{background:yellow;}
    
    
         .td-width {border: 1px solid #aaa;padding: 0 !important;user-select: none;}
         .td-width > div {width: calc(100%); cursor: pointer;display: inline-block;padding: 0.1rem;
         }
       td.td-width div.content {
            display: inline-block;
            padding: 0;
        }
    
    </style>
    
    @code {
        IQueryable<Person> filteredList;
        
    
        Person currentItem;
    
        protected override void OnInitialized()
        {       
            filteredList = Person.DataList.AsQueryable();
    
            currentItem = Person.DataList.First();
        }
        int hoverId;
    
    
        void clickValue(int id)
        {
            currentItem = Person.DataList.Where(p => p.Id == id).FirstOrDefault();
            
        }
    
        
        public class Person
        {
            public static List<Person> DataList= new(){
                new(){Id=1,LastName="Seinfeld",FirstName="Jerry"},
                new(){Id=2,LastName="Benes",FirstName="Elaine"},
                new(){Id=3,LastName="Saccamano",FirstName="Bob"}
                };
    
            public int Id { get; set; }
            public string LastName { get; set; }
            public string FirstName { get; set; }
        }
    }