JsTreeの使用-yellowcong

JsTree的重要函数

更多官方API，请点击JSTree

取消选中

deselect_all ([supress_event]
1. 当设置为true,就不会重复触发changed.jstree 的事件

$("#childZtree").jstree("deselect_all",true);

选中节点

select_node (obj [, supress_event, prevent_open])
1. jsTree节点的ID，每一个节点都有唯一的ID
2. 当设置为true,就不会重复触发changed.jstree 的事件
3. 如果设置为“true”，则选定节点的父级不会打开。这个一定要设定为true，不然就会导致浏览器运行缓慢，多事件匹配


//jstree的bug，用代码选中一个节点后，上一个节点仍是选中的状态
//取消选中， 然后再选择我们需要选中的数
$("#childZtree").jstree("deselect_all",true);
$('#childZtree').jstree('select_node', selectNode.original.id,true);

打开节点

open_node (obj [, callback, animation])
1. jsTree节点的ID，每一个节点都有唯一的ID
2. 回调函数
3. 节点的动画效果

$("#childZtree").jstree("open_node",parentId);

创建节点

create_node ([par, node, pos, callback, is_loaded])
1. 父类的id
2. 子类的JSON数据
3. “first” and “last” 生成节点的排序，默认是last
4. false 回调函数
5. true 是否加载内部参数表示如果父节点成功地加载

这个函数有问题，不是特别好用，下面的是，弄了好久，才试出来，可以通过这段代码完成节点的添加操作

//创建节点
$("#childZtree").jstree("create_node", parentId,  childNode[i], "last", false, true);

动态创建节点

动态创建JSTree节点的难点
1、数据动态加载
2、设定加载完数据选中
3、设定的数据选择和初始化逻辑问题

//rootNode  是ajax请求获取的数据，最好是将数据获取和表示用两个函数写，不然就会导致逻辑过多而混乱$("#childZtree").jstree({'core': {'check_callback':true,'multiple':false,"expand_selected_onload":true,'data': rootNode },}).on('select_node.jstree', function (e, data) {initButton();selectNode = data.node;}).on('changed.jstree', function (e, data) {var action = data.action;if(action == "select_node"){if(data.node.children.length ==0 ){//子节点 createChildNode 子节点的函数createChildNode(model,saikeiKb,selectNode.original.id);}//jstree的bug，用代码选中一个节点后，上一个节点仍是选中的状态//取消选中， 然后再选择我们需要选中的数据  $("#childZtree").jstree("deselect_all",true);$('#childZtree').jstree('select_node', selectNode.original.id,true);}}).on('create_node.jstree', function (e, data) {//在创建节点事件监听中设定默认的选中节点if(stCodeStr != null && stCodeStr == data.node.original.id){$("#kamokuStName").val(data.node.original.name);$("#jstree").jstree("open_node",stCodeStr);if(!hasSelect){$('#childZtree').jstree('select_node', stCodeStr,true);hasSelect = true;}}//第二个参数的初始化if(enCodeStr != null && enCodeStr == data.node.original.id){$("#kamokuEnName").val(data.node.original.name);if(!hasSelect){$('#childZtree').jstree('select_node', enCodeStr,true);hasSelect = true;}}}).on("loaded.jstree", function (event, data) {//在loaded节点中，做树完成后，点击树的操作，这个节点方法只调用一次
//只会在刚创建完节点，然后设定节点里面的方法}}}}

创建子节点

子节点创建，需要关注节点创建函数的迭代调用（自己调用自己）
代码不是完全代码，部分删掉了

function createChildNode(model,saikeiKb,parentId,selectCode){var childNode = getChildNodeJson(model,saikeiKb,parentId);if(childNode == null){return ;}for(var i=0;i<childNode.length;i++){//创建节点$("#childZtree").jstree("create_node", parentId,  childNode[i], "last", false, true);}//当只有子节点中还有数据，我们接着创建节点，知道没有数据if(childNode.length ==1){createChildNode(model,saikeiKb,childNode[0].id,selectCode);}if(childNode.length == 0){//做一些这个节点的逻辑操作$('#childZtree').jstree('select_node', parentId);}）if(childNode.length > 0){//当上一个节点有多个节点，打开父节点     $("#childZtree").jstree("open_node",parentId);}}
}

JsTreeの使用-yellowcong相关推荐

jstree 选中指定节点-yellowcong
项目中使用的树框架是Jstree,经常会遇到默认选中节点的问题,刚开始使用Jstree的同学,肯定是会被官方的API坑哭了,JsTree官方API,这篇文章介绍jstree 默认某个节点选中,和如何用 ...
基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用...
为什么80%的码农都做不了架构师?>>> 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap ...
jsTree设置默认节点全部展开的方法
最近项目有需求,当jsTree加载完毕的时候想让所有的节点都打开,便于用户操作,遂参考API,这里记录下来.好记性不如烂笔头: //jsTree的初始化$tree.jstree({'plugins': ...
jsTree 插件Ajax数据
完整代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...
【笔记】jstree插件的基本使用
官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式不需要在重新拼接返回格式不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...
SpringBoot+Jquery+Jstree实现企业架构管理
场景效果 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90 ...
JsTree中提示：Cannot read property 'core' of underfined
场景 Jstree的树形结构正好好运行,给数据添加了禁用状态后,就提示: 在仔细比对代码没错订单情况下,猜测是数据原因. 实现因为添加了是否禁用状态,首次进入页面时默认加载启用的数据,但是启用的数据 ...
SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID
场景 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897 ...
Sqlserver中使用ISNULL、CAST、CASE完成对jsTree数据的查询
场景 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897 ...

JsTreeの使用-yellowcong

JsTree的重要函数

取消选中

选中节点

打开节点

创建节点

动态创建节点

创建子节点

JsTreeの使用-yellowcong相关推荐

最新文章

热门文章