提问人：AGeist 提问时间：11/17/2023 更新时间：11/17/2023 访问量：23
Blazor QuickGrid - 尝试双击某行或使用按钮
Blazor QuickGrid - Trying to either double-click a row or use a button
问：
我正在使用 QuickGrid 的预发行版。
我在 Blazor 中有一个基本的 QuickGrid，用于用户列表。理想情况下，我希望能够双击用户行以拉出编辑模式。
第一个问题：是否有可能以某种方式创建允许双击 QuickGrid 行的代码？我看到它不是容易包含的功能。
第二：如果这是不可能的（或不值得），是否有一个很好的 QuickGrid 列示例，它将在每一行上创建一个“编辑”按钮，该按钮将为该特定用户拉出模型？我还为过滤器设置了它。我不确定这是否使事情复杂化。
我可以添加一些代码，但它实际上只是我现在拥有的基本可过滤 QuickGrid。我主要只是检查是否有人知道一些好的例子。
答：
0赞
Chris Berlin
11/23/2023
#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; }
}
}
评论