ZeonDocument

نصب و آموزش کامپوننت نمایش درختی Zeon Blazor TreeView

نحوه اضافه کردن کامپوننت (TreeView)

اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)

YourPage.razor

@using Zeon.Blazor.ZTreeView

اضافه کردن نمایش درختی (TreeView)

در صفحه و تگ مورد نظر خود جهت اضافه کردن نمایش درختی کد زیر را استفاده کنید

YourPage.razor

پارامتر ها (parameters)

نام پارامتر	نوع پارامتر	مقدار پیشفرض	اجباری	توضیحات
TValue	Generic Type		بله	نوع مدل دیتا سورس Data Source Model Type
Name	string	TreeView1	بله	نام کامپوننت که در هر صفحه باید یونیک باشد
DataSource	IEnumerable<TValue>		بله	لیستی از نوع TValue جهت نمایش درخت
AutoCheckChildren	bool	true	خیر	چک کردن فرزندان به صورت خودکار
FieldsMapSettings	FieldsMapSettings?	null	خیر	تنظیم فیلد ها اجباری با نام های متفاوت از مقادیر پیشفرض کامپوننت جهت مپ کردن دیتا
ShowCheckedBox	bool	true	خیر	نمایش چک باکس ها جهت چک زدن آیتم ها
ShowActionButtons	bool	(add:false, edit:false,remove: false)	خیر	تنظیم نمایش دکمه های اضافه - ویرایش و حذف آیتم
AddItemEvent	EventCallback<(int parentId, string value)>		خیر	رویداد اضافه کردن آیتم جدید
EditItemEvent	EventCallback<(int id, string newValue)>		خیر	رویداد ویرایش متن نمایشی آیتم
RemoveItemEvent	EventCallback<int>		خیر	رویداد حذف آیتم
DragAndDropIsEnabled	bool	false	خیر	تنظیم قابلیت کشیدن و رها کردن جهت تغییر پدر آیتم و مرتب سازی آیتم ها
OnReorderEvent	EventCallback<ReorderTree>		خیر	رویداد تغییر مرتب سازی و پدر آیتم
BackgroundColor	string	whiteSmoke	خیر	رنگ پس زمینه

توابع / پراپرتی (functions And Property)

نام	نوع	توضیحات
GetCheckedItems	int[]	دریافت لیست شناسه آیتم های چک شده
GetExpandedItems	int[]	دریافت لیست شناسه آیتم های منبسط شده
SetCheckedItems	void	تنظیم آیتم هایی که باید به وضعیت چک تغییر کنند
SetExpandedItems	void	تنظیم آیتم هایی که باید به وضعیت منبسط تغییر کنند
GetData	string	دریافت json دیتا تنظیم شده به همراه تغییرات
SetFilter	void	ارسال فیلتر مورد نظر با نوع Func<TValue, bool>? جهت جستجو یا فیلتر درخت
ReloadDataSource	void	بارگذاری مجدد دیتا
SelectedId	int	پراپرتی دریافت یا تنظیم آیتم انتخاب شده

نمایشگاه و نمونه کد (Samples)

حالت نمایش ساده و تک انتخابی

Output Preview

دسته اصلی
- نوشیدنی
- لبنیات
- بهداشتی

Code

</div>

@code {

List<ProductCategory> _productCategories = new();

protected override void OnInitialized()
{
var data = new List<ProductCategory>()
{
new ProductCategory() { Id = 1, Text = "دسته اصلی" , Expanded=true },
new ProductCategory() { Id = 2, ParentId = 1, Text = "نوشیدنی" },
new ProductCategory() { Id = 3, ParentId = 1, Text = "لبنیات" },
new ProductCategory() { Id = 4, ParentId = 1, Text = "بهداشتی" },
new ProductCategory() { Id = 5, ParentId = 2, Text = "نوشابه" },
new ProductCategory() { Id = 6, ParentId = 2, Text = "آبمیوه" },
new ProductCategory() { Id = 7, ParentId = 2, Text = "دوغ" },
new ProductCategory() { Id = 8, ParentId = 5, Text = "کوکاکولا" },
new ProductCategory() { Id = 9, ParentId = 5, Text = "پپسی" },
new ProductCategory() { Id = 10, ParentId = 3, Text = "ماست" },
new ProductCategory() { Id = 11, ParentId = 3, Text = "شیر" },
new ProductCategory() { Id = 12, ParentId = 4, Text = "صابون" },
new ProductCategory() { Id = 13, ParentId = 4, Text = "مایع دستشویی" },
new ProductCategory() { Id = 14, ParentId = 4, Text = "مسواک" },
new ProductCategory() { Id = 15, ParentId = 4, Text = "خمیردندان", }
};

_productCategories.AddRange(data);

base.OnInitialized();

}

public class ProductCategory
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Text { get; set; } = string.Empty;
public bool IsChecked { get; set; }
public bool Expanded { get; set; }
}

}

حالت نمایش با چک باکس و فیلتر

Output Preview

جستجو

دسته اصلی
- نوشیدنی
- لبنیات
- بهداشتی

Code

</div>

@code {

List<ProductCategory> _productCategories = new();

public ZTreeView<ProductCategory> RefTreeView { get; set; } = null!;

_productCategories.AddRange(data);

base.OnInitialized();

}

private void FilterTreeData(string value)
{
Func<ProductCategory, bool>? filter = null;

if (!string.IsNullOrEmpty(value))
{
filter = q => q.Text.Contains(value);
RefTreeView.SetFilter(filter);
}
else
{
RefTreeView.SetFilter(filter);
}
}

}

مپ کردن دیتا با فیلد های با نام های متفاوت

Output Preview

دسته اصلی
- نوشیدنی
- لبنیات
- بهداشتی

Code

</div>

@code {

List<ProductCategory2> _productCategories2 = new();

public ZTreeView<ProductCategory> RefTreeView2 { get; set; } = null!;

Zeon.Blazor.ZTreeView.FieldsMapSettings _mapperSetting = new FieldsMapSettings
{
Text = "Name",
ParentId = "PId"
};

protected override void OnInitialized()
{
var data2 = new List<ProductCategory2>()
{
new ProductCategory2() { Id = 1, Name = "دسته اصلی" , Expanded = true },
new ProductCategory2() { Id = 2, PId = 1, Name = "نوشیدنی" },
new ProductCategory2() { Id = 3, PId = 1, Name = "لبنیات" },
new ProductCategory2() { Id = 4, PId = 1, Name = "بهداشتی" },
new ProductCategory2() { Id = 5, PId = 2, Name = "نوشابه" },
new ProductCategory2() { Id = 6, PId = 2, Name = "آبمیوه" },
new ProductCategory2() { Id = 7, PId = 2, Name = "دوغ" },
new ProductCategory2() { Id = 8, PId = 5, Name = "کوکاکولا" },
new ProductCategory2() { Id = 9, PId = 5, Name = "پپسی" },
new ProductCategory2() { Id = 10, PId = 3, Name = "ماست" },
new ProductCategory2() { Id = 11, PId = 3, Name = "شیر" },
new ProductCategory2() { Id = 12, PId = 4, Name = "صابون" },
new ProductCategory2() { Id = 13, PId = 4, Name = "مایع دستشویی" },
new ProductCategory2() { Id = 14, PId = 4, Name = "مسواک" },
new ProductCategory2() { Id = 15, PId = 4, Name = "خمیردندان", }
};

_productCategories2.AddRange(data2);

base.OnInitialized();

}

public class ProductCategory2
{
public int Id { get; set; }
public int? PId { get; set; }
public string Name { get; set; } = string.Empty;
public bool IsChecked { get; set; }
public bool Expanded { get; set; }
}

}

فعال کردن drag and drop و نمایش دکمه های اضافه - ویرایش و حذف آیتم

Output Preview

دسته اصلی
- نوشیدنی
- لبنیات
- بهداشتی

Code

</div>

@code {

List<ProductCategory2> _productCategories2 = new();

public ZTreeView<ProductCategory> RefTreeView3 { get; set; } = null!;

Zeon.Blazor.ZTreeView.FieldsMapSettings _mapperSetting = new FieldsMapSettings
{
Text = "Name",
ParentId = "PId"
};

_productCategories2.AddRange(data2);

base.OnInitialized();

}

private void ReorderTreeEvent(ReorderTree reorderTree)
{

}

private void EditItemEvent((int id, string newValue) parameters)
{
_productCategories2.First(q => q.Id == parameters.id).Name = parameters.newValue;
RefTreeView3.ReloadDataSource();
}

private void AddItemEvent((int id, string value) parameters)
{
var item = new ProductCategory2()
{
Id = _productCategories2.Max(q => q.Id) + 1,
PId = parameters.id,
Name = parameters.value,
Expanded = false,
IsChecked = false,
};
_productCategories2.Add(item);
RefTreeView3.ReloadDataSource();
}

private void RemoveItemEvent(int id)
{
var item = _productCategories2.First(q => q.Id == id);
_productCategories2.Remove(item);
RefTreeView3.ReloadDataSource();
}

}