我正在使用以下配置渲染jstree
$('#deliverables').jstree({
'core': {
'data': data
},
'search': {
'case_insensitive': true,
'show_only_matches' : true
},
'plugins': ['search']
});
$('#deliverable_search').keyup(function(){
$('#deliverables').jstree('search', $(this).val());
});
Run Code Online (Sandbox Code Playgroud)
使用此配置,如果搜索文本找到至少一个节点,则jstree仅显示匹配的节点.但是如果搜索文本与任何节点不匹配,则jstree显示所有节点.我发现这有点奇怪.我错过了什么吗?
我尝试在jsTree中实现ajax搜索,但只在一个根节点内实现.
我阅读了文档,并找到了一些信息:
$ .jstree.defaults.search.ajax
str(它是搜索字符串)参数将随请求一起添加,如果搜索仅限于节点id,则将添加可选的inside参数.
我的搜索AJAX配置:
"search": {
// search config
"show_only_matches": true,
'ajax': {
'url': "/ajax/root-nodes"
}
},
Run Code Online (Sandbox Code Playgroud)
jsSearch电话:
$tree.jstree(true).search(searchText);
Run Code Online (Sandbox Code Playgroud)
我也使用延迟加载子节点.
有人做过这样的事吗?
在我的服务器中,我以jsTree的格式返回JSON对象:
{"id":"value", "text":"value", "parent":"value"}
Run Code Online (Sandbox Code Playgroud)
我通过Ajax调用获得了它。Console.log向我显示了详细信息,但是jsTree给了我错误:
未捕获的TypeError:无法读取未定义的属性“子级”
视图:
$.ajax({
url: "/category",
dataType: 'json',
type: 'GET',
success: function (res) {
$.each(res, function (i, obj) {
products.push([obj.id, obj.parent, obj.text]);
$('#jstree_demo_div').jstree({
'core': {
'data': [{ "id": obj.id, "parent": obj.parent != 0 ? obj.parent : "#", "text": obj.text }]
}
});
console.log(obj.parent != 0 ? obj.parent : "#");
});
}
});
Run Code Online (Sandbox Code Playgroud) 是否可以使用 JsTree 进行“惰性搜索”,其中搜索结果可以是包含当前不在树中的节点的路径?我有一棵大树,我正在延迟加载节点,并且希望能够处理包括当前未加载的节点的搜索。
到目前为止,唯一对我有用的是使用搜索回调并替换树中的所有数据并刷新。我想知道是否有一种不那么棘手的方法来实现这一点。
旧的文档似乎暗示了这一点:
“这个对象可用于在每次搜索时向服务器发出请求 - 如果您使用异步树,则非常有用。这样您就可以返回需要在执行实际 DOM 搜索之前加载的 ID 数组(以便所有加载与搜索匹配的节点)。例如,如果用户搜索“字符串”,您会在服务器端获取它,检查数据库并发现有一个包含该字符串的节点。但该节点是其他节点的子节点等 - 因此在您的响应中,您必须返回节点的路径(不包括节点本身)作为 ids: ["#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: …Run Code Online (Sandbox Code Playgroud) 我把主题设为
"themes": {
"theme": "proton"
},
Run Code Online (Sandbox Code Playgroud)
我的js树图像与叶
节点标记为(+),不可扩展.请突出显示
我试着用这个:
$("#jstree_demo_div").jstree("destroy").empty();
Run Code Online (Sandbox Code Playgroud)
它会删除已检查的节点并重新加载树,但不会应用新的更改.任何建议将不胜感激.
在全球范围内,我需要取消选中我的树 checkBox
我正在动态构建 JS 树。
我正在删除节点,当它发生时,它正在选择上面的节点并且“select_node”事件被触发。
我想覆盖默认功能
$('#treeViewContainer').css("height", 100px);
treeView = $('#treeView1');
treeView.bind('select_node.jstree', function (e, data) {
}
Run Code Online (Sandbox Code Playgroud)
我试图在删除节点后立即取消全选,但 'select_node' 事件被触发。
if ($('#treeViewResults').length != 0)
{
treeView.jstree("delete_node", $('#treeViewResults'));
$('#treeView1').jstree("deselect_all");
}
Run Code Online (Sandbox Code Playgroud)
如何在触发 'select_node' 事件之前删除节点后立即跳过 'select_node' 事件触发或取消选择所有节点。
请建议
我正在将jsTree(http://www.jstree.com/plugins/)与以下插件一起使用
"plugins" : [ "dnd" , "contextmenu" ,"ui" , "types" , "search" ,"sort" ]
Run Code Online (Sandbox Code Playgroud)
除搜索外,所有插件都可以正常工作。在树上没有添加搜索文本框来搜索节点.jsTree中是否还有其他依赖项可以使用搜索。请帮忙。