Ленивый поиск
Возможно ли иметь "ленивый поиск" с JsTree, где результаты поиска могут представлять собой путь, который включает в себя узлы, которых в настоящее время нет в дереве? У меня есть большое дерево, которое я загружаю узлом лениво и хотел бы иметь возможность обрабатывать поиски, которые включают узлы, не загруженные в данный момент.
Пока что единственное, что работает для меня, это использование обратного вызова поиска и замена всех данных в дереве и обновление. Мне было интересно, есть ли менее хакерский способ сделать это.
Старая документация, по-видимому, подразумевает следующее:
"Этот объект можно использовать для отправки запроса на сервер при каждом поиске - полезно, если вы используете асинхронные деревья. Таким образом, вы можете вернуть массив идентификаторов, которые необходимо загрузить перед выполнением фактического поиска DOM (чтобы все загружаются узлы, которые будут соответствовать поиску.) Например, если пользователь ищет "строку", вы получаете это на стороне сервера, проверяете базу данных и обнаруживаете, что есть узел, содержащий эту строку. Но узел является потомок какого-либо другого узла и т. д., поэтому в своем ответе вы должны вернуть путь к узлу (без самого узла) в виде идентификаторов: ["#root_node","#child_node_3"]. Это означает, что jstree загрузит эти два узла прежде чем выполнять поиск на стороне клиента, убедитесь, что ваш узел будет виден ".
Я попытался проверить это с помощью следующего кода. Поиск действительно инициирует URL-вызов, но jsTree, похоже, не использует ответ или выдает ошибку, если возвращаемые мной узлы не существуют. Я также не вижу другой запрос к серверу, который, вероятно, понадобится для узлов, которые еще не существуют в дереве:
<html>
<body>
<div id="jstree">tree goes here</div>
<input type="button" class="button" value="Search" id="search" style="">
</body>
<link rel="stylesheet" href="static/dist/themes/default/style.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="static/dist/jstree.js"></script>
<script type="text/javascript">
$("#search").click(function () {
console.log("search");
$("#jstree").jstree("search", "test");
});
$('#jstree').jstree({
core: {
data: {
dataType: "json",
url: function (node) {
console.log(node.id);
return node.id === "#" ? "http://127.0.0.1:5000/" : "http://127.0.0.1:5000/";
}
}
},
search: {
case_insensitive: true,
ajax: {
url: "http://127.0.0.1:5000/",
"data": function (n) {
return { id: n.attr ? n.attr("id") : 0 };
}
}
},
plugins: ["json_data", "search"]
})
;
</script>
</html>
Решение при асинхронном поиске jsTree - запуск загрузки новых узлов, похоже, не работает для меня. jsTree, похоже, ничего не делает с ответом от сервера.
1 ответ
Я могу быть очень поздно, чтобы ответить на этот вопрос, но вот похожий вопрос:
jsTree AJAX поиск с некоторыми дочерними узлами?
Принятый ответ содержит подробную информацию о том, что отправляется на сервер и каким должен быть ответ (массив уникальных родительских идентификаторов).
Убедитесь, что вы удалили функцию из search.ajax.data
- это свойство не может быть функцией - это стандартная конфигурация jQuery AJAX (поэтому это должен быть объект, и jstree добавит str
собственность к нему).
Кстати, убедитесь, что вы действительно можете отправлять запросы 127.0.0.1:5000
из-за той же политики происхождения - возможно, вам нужно добавить заголовки CORS.
Если это не помогает, укажите ответ сервера (заголовки и тело).