BzGrid
سورت با کلیک روی هدر، فیلتر ستونی، جستجو، صفحهبندی، انتخاب، Import/Export، و سه سطح گرید تو در تو.
خروجی اکسل/CSV بر اساس قابلیت «component.grid.excel» در پلن کاربر کنترل میشود (پلن فعلی: free).
@using BzCore.Components.Grid
<BzGrid TItem="Order" Items="orders" Pageable PageSize="5"
ShowExport ShowImport ExportFileName="orders.csv" OnImport="OnImport"
Selectable MultiSelect @bind-SelectedItems="selected">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Filterable Width="90px" Sortable />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Filterable Sortable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" Sortable />
</Columns>
</BzGrid>
@code {
public class Order
{
public int Id { get; set; }
public string Customer { get; set; } = "";
public decimal Amount { get; set; }
public bool Paid { get; set; }
}
List<Order> orders = new()
{
new() { Id = 1, Customer = "رضا", Amount = 250000, Paid = true },
new() { Id = 2, Customer = "مریم", Amount = 980000 },
};
IReadOnlyCollection<Order> selected = new List<Order>();
void OnImport(List<Dictionary<string, string>> rows)
{
foreach (var r in rows)
{
r.TryGetValue("مشتری", out var customer);
decimal.TryParse(r.GetValueOrDefault("مبلغ")?.Replace(",", ""), out var amount);
if (!string.IsNullOrWhiteSpace(customer))
orders.Add(new Order { Id = orders.Count + 1, Customer = customer!, Amount = amount });
}
}
}رویدادهای گرید (EventCallback)
برای هر اتفاق داخل گرید یک callback هست تا بیرون خبردار شوی و داده بگیری: کلیک/دابلکلیک ردیف، تغییر سورت، صفحه، اندازهٔ صفحه، جستجو، فیلتر، باز/بستن ردیف، و خروجی گرفتن.
| کد | مشتری | مبلغ | |
|---|---|---|---|
| 1001 | علی رضایی | 2500000 | |
| 1002 | زهرا محمدی | 8900000 | |
| 1003 | حسین کریمی | 1250000 | |
| 1004 | مریم احمدی | 4300000 | |
| 1005 | رضا نوری | 6000000 |
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
رویدادها:— هنوز رویدادی ثبت نشده —
@using BzCore.Components.Grid
<BzGrid TItem="Order" Items="orders" Pageable PageSize="5" Selectable
OnRowClick="@(o => Log($"کلیک ردیف #{o.Id}"))"
OnRowDoubleClick="@(o => Log($"دابلکلیک ردیف #{o.Id}"))"
OnSortChanged="@(e => Log($"سورت: {e.Field} {(e.Ascending ? \"صعودی\" : \"نزولی\")}"))"
OnPageChanged="@(e => Log($"صفحه {e.Page} از {e.TotalCount} ردیف"))"
OnPageSizeChanged="@(s => Log($"اندازهٔ صفحه: {s}"))"
OnSearchChanged="@(t => Log($"جستجو: «{t}»"))"
OnFilterChanged="@(e => Log($"فیلتر {e.Field}: {e.Value}"))"
OnRowExpanded="@(o => Log($"باز شد #{o.Id}"))"
OnRowCollapsed="@(o => Log($"بسته شد #{o.Id}"))"
OnExported="@(n => Log($"خروجی: {n} ردیف"))"
SelectedItemsChanged="@(items => Log($"انتخاب: {items.Count} ردیف"))">
<Columns>
<BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Sortable />
<BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Sortable Filterable />
<BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Total)" Sortable />
</Columns>
</BzGrid>
@code {
List<Order> orders = /* ... */;
List<string> eventLog = new();
void Log(string msg) => eventLog.Insert(0, msg);
}| کد | مشتری | مبلغ (تومان) | وضعیت | ||
|---|---|---|---|---|---|
| 1001 | علی رضایی | 2,500,000 | |||
| 1002 | زهرا محمدی | 8,900,000 | |||
| 1003 | حسین کریمی | 1,250,000 | |||
| 1004 | مریم احمدی | 4,300,000 | |||
| 1005 | رضا نوری | 6,000,000 |
نمایش 1 تا 5 از 12
تعداد در صفحه:
1 / 3
انتخابشده:
گرید حرفهای (footer / resize / sticky / group / edit)
ستون اول چسبان، تغییر عرض ستون با درگ، جمع/میانگین در فوتر، گروهبندی بر اساس وضعیت، و ویرایش اینلاین مشتری (دابلکلیک).
| کد | مشتری | مبلغ (تومان) |
|---|---|---|
| پرداختشده (7) | ||
| 1001 | علی رضایی | 2,500,000 |
| 1003 | حسین کریمی | 1,250,000 |
| 1005 | رضا نوری | 6,000,000 |
| 1007 | امیر صادقی | 12,000,000 |
| 1008 | نگار حسینی | 3,200,000 |
| 1010 | الهام رحیمی | 5,400,000 |
| 1012 | لیلا فتحی | 7,700,000 |
| در انتظار (5) | ||
| 1002 | زهرا محمدی | 8,900,000 |
| 1004 | مریم احمدی | 4,300,000 |
| 1006 | سارا یوسفی | 750,000 |
| 1009 | بهروز عباسی | 980,000 |
| 1011 | کاوه مرادی | 2,100,000 |
| جمع: 55,080,000 | ||