BzGrid
دیتاگرید
مرتب سازی، فیلتر، صفحه بندی، انتخاب، جزییات تودرتو و خروجی.
دکمهفرم و اینپوتگروه اینپوتگروه دکمهانتخاب تاریختکمیل خودکارکارتنمایشلودینگدیالوگاعلانپیام عملیاتمنو کشوییکانتکس منوصفحه بندیلایت باکسدرختدیتاگریدنمودارتب و آکاردیوننویگیشن بارسایدبارتایم لاینویزارداسلایدرآپلودرادیتور متنویرایشگر مستقلسند و چاپتقویمابزار ایرانی
کامپوننتی پیدا نشد.
ردیف غیرفعال و اکشنهای وابسته به انتخاب
سفارشهای پرداختشده کاملاً قفل هستند. دکمههای بالای گرید نیز بر اساس صفر، دقیقاً یک، یا حداقل یک انتخاب فعال میشوند.
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
رویدادها:— هنوز رویدادی نیست —
@using BzCore.Components.Grid
@using BzCore.Enums
<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5" Selectable
HeaderActions="@_headerActions"
RowDisabled="@(o => o.Paid)"
OnRowClick="@(o => Log($"کلیک ردیف #{o.Id}"))"
OnSortChanged="@(e => Log($"مرتب سازی: {e.Field}"))"
OnPageChanged="@(e => Log($"صفحه {e.Page}"))">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Sortable Width="90px" />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Sortable Filterable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" Sortable />
</Columns>
</BzGrid>
@code {
private readonly List<string> _log = new();
private readonly IReadOnlyList<BzGridHeaderAction<Order>> _headerActions =
[
new()
{
Title = "سفارش جدید",
StartIcon = "fa-solid fa-plus",
Color = BzColor.Primary,
OnClick = context => CreateOrderAsync(context.SelectedItems)
},
new()
{
Title = "حذف انتخابشدهها",
StartIcon = "fa-solid fa-trash",
Color = BzColor.Danger,
Variant = BzButtonVariant.Soft,
SelectionRequirement = BzGridActionSelectionRequirement.OneOrMore,
OnClick = context => DeleteAsync(context.SelectedItems)
}
];
private Task CreateOrderAsync(IReadOnlyCollection<Order> selectedItems)
{
Log($"تعداد انتخابشده: {selectedItems.Count}");
return Task.CompletedTask;
}
public class Order
{
public int Id { get; set; }
public string Customer { get; set; } = "";
public decimal Amount { get; set; }
public bool Paid { get; set; }
}
private List<Order> _orders = new()
{
new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true },
new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false },
new Order { Id = 1003, Customer = "حسن کریمی", Amount = 3_800_000, Paid = true },
};
private void Log(string msg)
{
_log.Insert(0, $"{DateTime.Now:HH:mm:ss} — {msg}");
if (_log.Count > 6) _log.RemoveAt(_log.Count - 1);
StateHasChanged();
}
}انتخاب چندتایی + جزییات تودرتو + خروجی
Template ستون را سفارشی میکنه و DetailTemplate ردیف بازشونده می سازد — حتی با یک گرید تودرتو.
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
انتخاب شده:
@using BzCore.Components.Grid
@using BzCore.Components.Button
@using BzCore.Enums
<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5"
ShowExport ExportFileName="orders.csv"
Selectable MultiSelect @bind-SelectedItems="_selected">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Filterable Width="90px" />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Filterable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" />
@* A column with no Field renders whatever you put in Template. *@
<BzColumn TItem="Order" Title="وضعیت" Sortable="false" Align="center">
<Template Context="o">
<BzButton Size="BzSize.Small" Variant="BzButtonVariant.Soft"
Color="@(o.Paid ? BzColor.Success : BzColor.Warning)"
Text="@(o.Paid ? "پرداخت شده" : "در انتظار")" />
</Template>
</BzColumn>
</Columns>
@* Expandable row — here it holds a second, nested grid. *@
<DetailTemplate Context="o">
<h4>اقلام سفارش @o.Id</h4>
<BzGrid TItem="OrderLine" Items="o.Lines" Pageable="false" ShowToolbar="false" Dense>
<Columns>
<BzColumn TItem="OrderLine" Title="کالا" Field="@(l => l.Product)" />
<BzColumn TItem="OrderLine" Title="تعداد" Field="@(l => l.Qty)" Align="center" />
</Columns>
</BzGrid>
</DetailTemplate>
</BzGrid>
<p>انتخاب شده: @string.Join("، ", _selected.Select(s => s.Id))</p>
@code {
private IReadOnlyCollection<Order> _selected = new List<Order>();
public class Order
{
public int Id { get; set; }
public string Customer { get; set; } = "";
public decimal Amount { get; set; }
public bool Paid { get; set; }
public List<OrderLine> Lines { get; set; } = new();
}
public class OrderLine
{
public string Product { get; set; } = "";
public int Qty { get; set; }
}
private List<Order> _orders = new()
{
new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true, Lines =
{
new OrderLine { Product = "کیبورد", Qty = 2 },
new OrderLine { Product = "ماوس", Qty = 1 },
}},
new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false, Lines =
{
new OrderLine { Product = "مانیتور", Qty = 1 },
}},
};
}