Ali Majed HA Ответов: 2

Выберите узел jqxtree, используя идентификатор элемента в базе данных

Привет

У меня есть таблица в базе данных SQL с именем "группы". с полями :

Идентификатор Звание Атрибутом ParentId

значения отображаются в jqxTree правильно, но мне нужно, чтобы, когда пользователь нажимает на продукт, чтобы обновить его, jqxTree выбирает текущий узел для группы этого продукта, чтобы пользователь мог изменить его или нет.

заранее спасибо

Что я уже пробовал:

$('#jqxTree').jqxTree('selectItem', element);

или
$('#jqxTree').jqxTree('select_node', element);


где элемент-это поле "Id" для группы продуктов. Я могу правильно получить идентификатор, но он не будет выбирать группу в jqxTree.

2 Ответов

Рейтинг:
2

natuan8687

Решение

Пожалуйста, обратите внимание, что мой пример кода использует ASP.NET основной помощник тега jQWidgets. Но он полностью работает на родном Javascript/jQuery.

1. Вид (Индекс.cshtml по)

@model IEnumerable<TinyShoppingCart.Server.Presentation.Admin.ViewModels.ViewProductCategoryViewModel>

<!-- Tree view-->
<jqx-tree id="tree" width="100%" itemsMember="Children" displayMember="Name" valueMember="Id" source="Model"></jqx-tree>


2. Просмотр Модели
public class ViewProductCategoryViewModel
{
    public int Id {get;set;}

    public string Name {get;set;}

    public int? ParentId {get;set;}

    public IEnumerable<ViewProductCategoryViewModel> Children {get;set;}
}

3. Контроллер (ProductCategoryController)
public IActionResult Index()
{
    var productCategories = _productCategoryRepository.TreeListAsync(x => x.ParentId == null);
    IEnumerable<ViewProductCategoryViewModel> viewModel = _mapper.Map<IEnumerable<ProductCategory>, IEnumerable<ViewProductCategoryViewModel>>(productCategories.Result);

    return View(viewModel);
}

В основном, логика получения данных из базы данных.

4. JavaScript (Важно!!!!)
- Шаг 1: получить элемент дерева по идентификатору базы данных
function getTreeElement(databaseId) {
    // Firstly, we get all items of tree using "getItems" method
    var elements = $("#tree").jqxTree("getItems");

    // Loop through all items 
    for(var i = 0; i < elements.length; i++) {
        var element = elements[i];
        // element.value is a database ID corresponding with this element. Please note that we set "valueMember" for the tree is "Id" property of the model named ViewProductCategoryViewModel in View
        if(element.value === databaseId) {
            return element;
        }
    }

    return null;
}

- Шаг 2: выберите элемент, который мы нашли на шаге 1
var selectElement = getTreeElement("1");
if(selectElement != null) {
    $("#tree").jqxTree("selectItem", selectElement);
    $("#tree").jqxTree("expandItem", selectElement)
}

Готово!
Надеюсь, это поможет

Рейтинг:
0

Kornfeld Eliyahu Peter

Согласно документация[^] так и должно быть

$('#jqxTree').jqxTree('selectItem', element);

где element это бирка ли...

Ali Majed HA

Здравствуйте и спасибо, но я внимательно изучил документ. Да, по тегу li это так, но как насчет использования данных JSON в качестве sresource для дерева?