Member 10435696 Ответов: 1

привязка jstree с отправкой данных json из контроллера mvc


My controller




[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public JsonResult GetAllNodes()
        {

            List<Employee> pEmployee = new List<Employee>();
            Employee tEmployee = new Employee();
            tEmployee.EMP_ID = 1;
            tEmployee.EMP_NAME = "steve";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 2;
            tEmployee.EMP_NAME = "Joe";
            tEmployee.PARENT_EMP_ID = 1;
            pEmployee.Add(tEmployee);


            tEmployee = new Employee();
            tEmployee.EMP_ID = 3;
            tEmployee.EMP_NAME = "Eric";
            tEmployee.PARENT_EMP_ID = 1;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 4;
            tEmployee.EMP_NAME = "Henry";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 5;
            tEmployee.EMP_NAME = "Katie";
            tEmployee.PARENT_EMP_ID = 4;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 6;
            tEmployee.EMP_NAME = "george";
            tEmployee.PARENT_EMP_ID = 4;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 7;
            tEmployee.EMP_NAME = "Renai";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 8;
            tEmployee.EMP_NAME = "Marc";
            tEmployee.PARENT_EMP_ID = 7;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 9;
            tEmployee.EMP_NAME = "John";
            tEmployee.PARENT_EMP_ID = 7;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 10;
            tEmployee.EMP_NAME = "Andrew";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            return Json(pEmployee, JsonRequestBehavior.AllowGet);
         //   return pEmployee;
        }


View



<script type="text/javascript">


    $(document).ready(function () {
        $.getJSON("Employee/GetAllNodes", function (result) {
            alert(result);
            alert(JSON.stringify(result));
            $("#treeViewDiv").jstree({
                "plugins": ["themes", JSON.stringify(result)]
            });
        });
    });
</script>




Now the issue is that when result comes from controller ,it doesnt bind to jstree.How to bind the data to jstree.

1 Ответов

Рейтинг:
2

SoMad

Прошло уже почти 2 года с тех пор, как мне удалось использовать jstree в проекте (и я использовал "древовидную структуру данных" вместо списка), но попробуйте отбросить stringify часть и просто делать:

$("#treeViewDiv").jstree({
    "plugins": ["themes", result]
});


или, если это неверно (я сейчас не помню), перейдите к более структурированному подходу (чтобы параметры, которые вы, возможно, захотите указать, стали более читабельными):
$("#treeViewDiv").jstree({
    "json_data": { "data": result },
    "plugins": ["themes", "json_data"]
});


Сорен Мадсен


Member 10435696

Я использую ur 2-е решение..Выпуск БТ-прежнему существует.Я получаю это от контроллера в своем "результате"..
[объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта]
Теперь это не привязывается к моему jstree

SoMad

Работает ли это, когда ваш контроллер возвращает только один объект Employee вместо списка?

Сорен Мадсен

Member 10435696

нет, тогда и это не работает.В случае одного работника это дает
[объект Object]
и это тоже не связывает

Member 10435696

Я внес некоторые изменения в свой взгляд, но все равно он не работает.Любая помощь будет оценена по достоинству
< script type= "text/javascript">
$(документ).готово(функция () {
$.Аякс({
тип: "пост",
url: 'Employee/GetAllNodes',
contentType: "application/json; charset=utf-8",
тип данных: 'json',
данные: "{}",
успех: функция (msg) {
предупреждение((МСГ));
$('#treeViewDiv'). jstree({
"json_data": { "данные":сообщение},
"плагины": ["темы", " json_data"]
});
}
, тайм-аут: 60000
});
});

< / script>


и в моем контроллере я изменил последние 2 строки


var jsonData = new JavaScriptSerializer (). Serialize(pEmployee);

return Json(jsonData);


bt jstree не привязывается

SoMad

Извини, что не перезвонил тебе, но я был занят кое-чем другим. Я не работал с jstree, используя AJAX-вызовы. Если вы вернетесь к тому, что у вас было раньше, я думаю, что смогу вам помочь.

Я понял, что проблема заключается в том, что вы не переводите объекты данных в формат, ожидаемый jstree. Это была одна из тех вещей, с которыми у меня тоже были проблемы, но поскольку мои данные были структурированы не как список объектов, а как "древовидный тип данных" (объект корневого узла с заголовком и списком объектов дочерних узлов и т. д.), Я подумал, что вы, возможно, взяли метод просто передачи списка непосредственно откуда-то. Насколько я знаю, это не сработает.

Ожидаемый формат узла показан ниже. Поскольку вы находитесь на ранних стадиях, вы можете попробовать просто установить поле "Текст" для всех узлов. Я могу дать вам пример функции, которая преобразует мои объекты в формат, ожидаемый jstree. К сожалению, у меня сейчас нет с собой кода, поэтому я должен добавить его сюда, когда вернусь домой через 5-6 часов.

// Ожидаемый формат узла (обязательных полей нет)
{
id: "string" // будет автоматически сгенерирован, если опущен
текст : "строка" / / текст узла
значок: "string" / / строка для custom
государство : {
открыто: boolean / / является ли узел открытым
disabled : boolean / / является ли узел отключенным
selected : boolean / / является выбранным узлом
},
children : [] / / массив строк или объектов
li_attr: {} / / атрибуты для сгенерированного узла LI
a_attr: {} / / атрибуты для сгенерированного узла A
}


Сорен Мадсен

SoMad

Если бы вы могли попробовать что-нибудь очень быстро, измените линию
"json_data": { "данные":сообщение},
к
"json_data": { "данные":сообщение.EMP_NAME},

Это должно, по крайней мере, дать вам один узел в дереве, отображающий имя объекта employee, который вы отправляете прямо сейчас. Просто чтобы убедиться, что все, по крайней мере, происходит правильно.

Сорен Мадсен

Member 10435696

У меня есть эти данные, поступающие от контроллера

[{"EMP_ID":1,"EMP_NAME":"steve","PARENT_EMP_ID":0},{"EMP_ID":2,"EMP_NAME":"Joe","PARENT_EMP_ID":1},{"EMP_ID":3,"EMP_NAME":"Eric","PARENT_EMP_ID":1},{"EMP_ID":4,"EMP_NAME":"Henry","PARENT_EMP_ID":0},{"EMP_ID":5,"EMP_NAME":"Katie","PARENT_EMP_ID":4},{"EMP_ID":6,"EMP_NAME":"george","PARENT_EMP_ID":4},{"EMP_ID":7,"EMP_NAME":"Renai","PARENT_EMP_ID":0},{"EMP_ID":8,"EMP_NAME":"Marc","PARENT_EMP_ID":7},{"EMP_ID":9,"EMP_NAME":"John","PARENT_EMP_ID":7},{"EMP_ID":10,"EMP_NAME":"Andrew","PARENT_EMP_ID":0}]


и когда я пытаюсь msg.EMP_NAME..Это дает неопределенное

SoMad

Итак,в вашем последнем коде вы отправляли только один объект employee. Тогда попробуйте вместо этого эту строку:
"json_data": {"data": msg[0].EMP_NAME},

Сорен Мадсен

Member 10435696

alert (msg[0].Идентификатор emp_id);
alert (msg[0].PARENT_EMP_ID);
alert (msg[0].EMP_NAME);

Это все дают неопределенное

SoMad

Заключается в том, что с помощью кода с AJAX-вызов?

SoMad

Можете ли вы увидеть, будет ли этот код работать?
$. getJSON ("Employee/GetAllNodes", функция (результат) {
var allEmployees = ";

$. each(result, function (keyEmployees, employee) {
var nodeData = {"данные": {название: сотрудник.EMP_NAME }, "metadata": {id: employee.Идентификатор emp_id} };

если (все сотрудники.длина = = 0) {
allEmployees = [nodeData];
}
ещё {
allEmployees = [allEmployees, nodeData];
}
});

$("#treeViewDiv"). jstree({
"json_data": {"data": allEmployees },
"плагины": ["темы", " json_data"]
});
});


Сорен Мадсен

Member 10435696

< script type= "text/javascript">
$(документ).готово(функция () {
$.Аякс({
тип: "пост",
"url": 'Employee/GetAllNodes',
"contentType": "application/json; charset=utf-8",
"тип данных": 'json',
"данные": "{}",
успех: функция (msg) {
alert (msg[0].Идентификатор emp_id);
alert (msg[0].PARENT_EMP_ID);
alert (msg[0].EMP_NAME);
предупреждение((МСГ));
$('#treeViewDiv'). jstree({
"json_data": { "данные": сообщение.EMP_NAME},
"плагины": ["темы", " json_data"]
});
}
, тайм-аут: 60000
});
});

Member 10435696

Стив
Джо
Эрик
Генри
Кэти
джордж
Ренай
Марк
Джон
Эндрю


Эй, твой код дал мне этот вывод..

SoMad

Хорошо, это прогресс :). действительно ли "Стив" появляется как корень всего остального?

Сорен Мадсен

Member 10435696

НЕТ, ВСЕ ДЕЙСТВУЮТ КАК РОДИТЕЛИ.МЕЖДУ НИМИ НЕТ НИКАКИХ ДЕТСКО-РОДИТЕЛЬСКИХ ОТНОШЕНИЙ.

SoMad

Хорошо. Вот к чему я стремился. Я предполагаю, что вы хотите показать их как настоящее дерево. Я заметил в документация для jstree[^], что если вы добавите атрибут 'parent', jstree автоматически построит иерархию.
Мне было бы очень интересно услышать, работает ли это для вас, если вы добавите его. Так что в основном построили nodeData следующим образом:
var nodeData = {"данные": {название: сотрудник.EMP_NAME }, "metadata": {id: employee.Идентификатор emp_id, родителей: работника.PARENT_EMP_ID} };

Сорен Мадсен

Member 10435696

Извините, это снова дает то же самое дерево


поскольку мы используем getjson,в моем контроллере я сделал это


[httpGet]
public JsonResult GetAllNodes()
{
List< employee> pEmployee = новый список & lt;employee>();
Employee tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 1;
tEmployee.EMP_NAME = " Стив";
tEmployee.PARENT_EMP_ID= 0;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 2;
tEmployee.EMP_NAME = " Джо";
tEmployee.PARENT_EMP_ID = 1;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 3;
tEmployee.EMP_NAME = " Эрик";
tEmployee.PARENT_EMP_ID = 1;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 4;
tEmployee.EMP_NAME = " Генри";
tEmployee.PARENT_EMP_ID = 0;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 5;
tEmployee.EMP_NAME = " Кэти";
tEmployee.PARENT_EMP_ID = 4;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 6;
tEmployee.EMP_NAME = " Джордж";
tEmployee.PARENT_EMP_ID = 4;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 7;
tEmployee.EMP_NAME = " Renai";
tEmployee.PARENT_EMP_ID = 0;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 8;
tEmployee.EMP_NAME = " Марк";
tEmployee.PARENT_EMP_ID = 7;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 9;
tEmployee.EMP_NAME = " Джон";
tEmployee.PARENT_EMP_ID = 7;
pEmployee.Добавить (tEmployee);

tEmployee = новый сотрудник();
tEmployee.Идентификатор emp_id = 10;
tEmployee.EMP_NAME = " Андрей";
tEmployee.PARENT_EMP_ID = 0;
pEmployee.Добавить (tEmployee);

return Json(pEmployee, JsonRequestBehavior.AllowGet);


}
}




Н мой взгляд


$. getJSON ("Employee/GetAllNodes", функция (результат) {
var allEmployees = ";
предупреждение(результат);
$. each(result, function (keyEmployees, employee) {
// var nodeData = {"данные": { название: сотрудник.EMP_NAME }, "metadata": {id: employee.Идентификатор emp_id} };
var nodeData = {"данные": {название: сотрудник.EMP_NAME }, "metadata": {id: employee.Идентификатор emp_id, родителей: работника.PARENT_EMP_ID} };

если (все сотрудники.длина = = 0) {
allEmployees = [nodeData];
}
ещё {
allEmployees = [allEmployees, nodeData];
}
});

$("#treeViewDiv"). jstree({
"json_data": {"data": allEmployees },
"плагины": ["темы", " json_data"]
});
});

БТ он не работает..он дал имя человек

SoMad

Ладно, это отстой. Именно с этим я и столкнулся, поэтому мне пришлось построить дерево, поместив код построения узла в рекурсивную функцию.

Подожди, я только что кое-что заметил. В вашем коде, когда PARENT_EMP_ID == 0, означает ли это, что у них нет родителя? Если это так, то в соответствии с документация jstree[^], вы должны установить атрибут 'parent' в значение"#".

Сорен Мадсен

Member 10435696

PARENT_EMP_ID=0 означает, что они являются родительскими и имеют дочерние узлы ниже них

Например, я хочу, чтобы Стив был родителем, а Джо и Эрик - его дочерним узлом..

SoMad

Попробуйте использовать это:
var parentId = (сотрудник.PARENT_EMP_ID == 0 ? "#" : работник.PARENT_EMP_ID);
var nodeData = {"данные": {название: сотрудник.EMP_NAME }, "metadata": {id: employee.EMP_ID, parent: parentId} };

(Надеюсь, я правильно закодировал это)

Сорен Мадсен

Member 10435696

Ваш код идеален..но это дает мне тот же результат..

SoMad

Сожалеть об этом. Я забыл спросить вас, какую версию jstree вы используете.

Сорен Мадсен

SoMad

Я просто еще раз взглянул на документацию jstree и понял, что параметры, которые я использовал здесь, основываясь на старой версии, которую я использовал 2 года назад, довольно сильно изменились. Поэтому, если вы используете последнюю версию jstree, попробуйте вместо этого этот измененный код:

var parentId = (сотрудник.PARENT_EMP_ID == 0 ? "#" : работник.PARENT_EMP_ID);
var nodeData = {"data": { text: employee.EMP_NAME, id: сотрудник.EMP_ID, parent: parentId} };

Сорен Мадсен

Member 10435696

извините, но как найти ту версию, которая у меня есть...sory forr this queston

SoMad

Лучший вопрос. Я думаю, что в папке, где у вас есть файлы jstree, есть файл Readme.

Сорен Мадсен

Member 10435696

я думаю их проблема в моей Яш..может у дать мне ссылку, откуда я могу на JS +jstree плагин jQuery скачать последнюю версию

SoMad

Перейдите сюда и нажмите зеленую кнопку загрузки: http://www.jstree.com/[^]

Сорен Мадсен

Member 10435696

Эй, сори 4 поздний ответ..

Мой этот код начинает работать.мои оповещения дают правильные данные..
< script type= "text/javascript">
$(документ).готово(функция () {
$.Аякс({
тип: "пост",
"url": 'Employee/GetAllNodes',
"contentType": "application/json; charset=utf-8",
"тип данных": 'json',
"данные": "{}",
успех: функция (msg) {
alert (msg[0].Идентификатор emp_id);
alert (msg[0].PARENT_EMP_ID);
alert (msg[0].EMP_NAME);
предупреждение((МСГ));
$('#treeViewDiv'). jstree({
"json_data": {"data": msg[0].EMP_NAME},--------->Это печать Стива
"плагины": ["темы", " json_data"]
});
}
, тайм-аут: 60000
});
});

SoMad

Хорошо, но вам все равно нужно построить дерево, верно?
Вы обновили свою версию jstree?

Сорен Мадсен

JOHN JOY NEELANKAVIL

как же мне теперь построить дерево? с текущей позиции