jsTree工作笔记001---jsTree的基本使用

技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152

判断用户有没有选中节点:

var treeown = $('#tree_' + own).jstree(true);//获得整个树
if (treeown) {var selectednode = _getCurrNode(own);if (selectednode) {//没有勾选是否功能菜单//$.modal.alertWarning("请先选中要删除的菜单!!");} else {$.modal.alertWarning("请先选中要删除的菜单!!");return;}
}

/***   获取当前所选中的结点*/
function _getCurrNode(own){var ref = $('#tree_' + own).jstree(true),sel = ref.get_selected();console.log(sel);if(!sel.length) {console.log("----");return false;}selsel = sel[0];return sel;
}

判断是否为最末级菜单:

//获取选中节点,判断该节点有无子节点:
var treeown = $('#tree_' + own).jstree(true);//获得整个树
if (treeown) {var selectednode = _getCurrNode(own);if (util.isEmpty(variety)) {//没有勾选是否功能菜单} else {if (treeown.is_leaf(selectednode)) {//如果是最末级别,可以选择为功能菜单} else {//否则不能勾选为功能菜单$.modal.alertWarning("请勾选末级菜单为功能菜单!");return;}}
}

判断是否有子节点:

有3种方法:

用is_parent( node)方法, node传节点ID或节点对象, 有下级节点则返回true.
用is_leaf(node)方法, 此方法表示是否为最末级, 刚好和is_parent相反.
在事件中获取node对象, 其中node.child为包含所有直接子节点的数组, node.child.length === 0 则没有下级节点.

示例:

html

1	`<div` `id="tree"></div>`

JavaScript

var $tree = $('#tree');

$tree.jstree({

core: {

data: [

{ id: '1', parent: '#', text: "1" },

{ id: '2', parent: '1', text: "11" },

{ id: '3', parent: '1', text: "12" },

{ id: '4', parent: '2', text: "111" }

]

}

});

$tree.on('ready.jstree', function () {

//jQuery风格

$tree.jstree('is_parent', '2'); //true

$tree.jstree('is_leaf', '2'); //false

//使用jstree实例对象操作

var tree = $tree.jstree(true);

tree.is_parent('4'); //false

tree.is_leaf('4'); //true

//注意: jstree的初始化是一个异步过程, 如果上述代码没有放在初始化完成的事件中,将不会得到正确的结果,因为执行代码时,jstree还没生成.

});

//jstree事件中的应用

$tree.on('select_node.jstree', function (e, data) {

var node = data.node;

if(node.child.length > 0)

console.log('此节点有下级节点');

var tree = data.instance;

if(tree.is_parent(node)) //这里无需tree.is_parent(node.id), is_parent方法可以node对象作为参数.

console.log('此节点有下级节点');

});

补充:刷新树
$('#tree_' + own).jstree(true).refresh();

需要导入这两个文件:

<link href="../plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<script src="../plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>

这里需要注意:如果用jstree之前,一棵树,不销毁的话,继续用是没有效果的jstree,会还是之前构建的树,用之前需要销毁之前的.

需要调用:

$('#tab_1').jstree("destroy");

这样来把之前的树销毁一下,重新生成新的才行

1.定义:

其实定义一个id,就可以来初始化一个tree<div class="tab-content"><div class="tab-pane active" id="tab_1"></div><div class="tab-pane" id="tab_2"></div><div class="tab-pane" id="tab_3"></div><div class="tab-pane" id="tab_4"></div><div class="tab-pane active" id="tab_5"></div>
</div>

2. 初始化一棵树

根据div的id初始化一棵树:$('#tab_'+own).jstree({"core" : {"themes" : {"responsive": false},"check_callback" : true,'data' : function (obj, callback) {var jsonstr="[]";var jsonarray = eval('('+jsonstr+')');constant.ajax.get({ //传给后台的数据,以及访问后台的urlurl:http://localhost:8081/sc-test/getmenu,data:{curSystem:own,type:1,curroleId:curoleid},//传给后台的数据,根据需要写async: false,success:function(result) { //只有这里需要自己写var arrays= result.data.list;for(var i=0 ; i<arrays.length; i++){if(arrays[i].parentMenuid==null){arrays[i].parentMenuid = 0;}var arr = {"id":arrays[i].id,//树节点的id"parent":arrays[i].parentMenuid==0?"#":arrays[i].parentMenuid        父节点"text":arrays[i].menuName,//显示菜单名字"state":{"selected":arrays[i].isselected}//这里,标识一个节点的CheckBox是否为选中的状态如果,树//没有CheckBox,则不需要state":这个部分}jsonarray.push(arr);}}})callback.call(this, jsonarray);}},"types" : {"default" : {"icon" : "fa fa-folder icon-state-warning icon-lg"},"file" : {"icon" : "fa fa-file icon-state-warning icon-lg"}},"state" : { "key" : "demo2" },"checkbox" : {"keep_selected_style" : true},"plugins" : ["themes","contextmenu",'checkbox'] // "plugins":["themes","html_data","contextmenu"] //这个是不带CheckBox的,如需要CheckBox,使用上面的
});

3.根据选择的树的某一节点,的时候做什么动作


$('#tab_'+own).on('changed.jstree',function(e,data){//当前选中节点的idvar domId = data.instance.get_node(data.selected[0]).id;//当前选中节点的文本值//var value = data.instance.get_node(data.selected[0]).text;if(domId!=undefined){constant.ajax.get({url:constant.url.sc_support.cmenu+"/"+domId,//根据选中的节点id去后台取数据data:{},async:false,success:function(data){var result = data.data;//console.log(result);if(result!=null){menuId = result.id;debugger;$('#parentMenuid'+own).val(result.parentMenuid);$('#menuName'+own).val(result.menuName);$('#menuUrl'+own).val(result.menuUrl);$('#menuOrder'+own).val(result.menuOrder);$('#menuIcon'+own).val(result.menuIcon);if(result.variety=="1"){//让:<input id="isvariety" type="checkbox" style="margin-left: 10px;vertical-align: text-bottom;" name="isvariety" value="1">
//类似于上面这个选中,或非选中$("#isvariety").prop("checked","checked");}else{$("#isvariety").prop("checked",false);}// if(own==dic.getByDictId("SYS_TYPE","SYS_PE").code)//     $("#variety").val(result.varIety);// }}},error:function(){}})}
});

4.点击保存的时候,获取选中的节点值传给后台处理

$("#btnSaveRoleAccess").click(function () {//这里有5颗树,获取每颗树,上CheckBox被选中的部分var slectedArray=[];debugger;var tab1 = $('#tab_1').jstree(true);//获得整个树if(tab1){//如果树不为nullvar tab1CheckedNodes = tab1.get_checked(true);tab1CheckedNodes.forEach(function(e){if(!!e.parent && e.parent!="#"){slectedArray.push({"id":e.id,"text":e.text,"systype":"1"});}});}var tab2 = $('#tab_2').jstree(true);//获得整个树if(tab2){var tab2CheckedNodes = tab2.get_checked(true);tab2CheckedNodes.forEach(function(e){if(!!e.parent && e.parent!="#"){slectedArray.push({"id":e.id,"text":e.text,"systype":"2"});}});}var tab3 = $('#tab_3').jstree(true);//获得整个树if(tab3){var tab3CheckedNodes = tab3.get_checked(true);tab3CheckedNodes.forEach(function(e){if(!!e.parent && e.parent!="#"){slectedArray.push({"id":e.id,"text":e.text,"systype":"3"});}});}var tab4 = $('#tab_4').jstree(true);//获得整个树if(tab4){var tab4CheckedNodes = tab4.get_checked(true);tab4CheckedNodes.forEach(function(e){if(!!e.parent && e.parent!="#"){slectedArray.push({"id":e.id,"text":e.text,"systype":"4"});}});}var slectedArrayStr=JSON.stringify(slectedArray);var cmParam = {};var role={}role.rolename = $("#inputrolename").val();role.roleintro = $("#inputroleintro").val();role.roleid = curoleid;cmParam.type = "addBusMenuAccess";cmParam.mark = JSON.stringify(role);cmParam.data = slectedArrayStr;//发给后台处理constant.ajax.post(constant.url.sc_support.rolebusmenuaccess,cmParam,function (data){if(data.data==0){swal('操作成功','','success');accessArray();}else{swal('请先添加这个权限','','warning')}//$("#btn-rolepermiss").trigger("click");//$("a[class = 'jstree-anchor jstree-clicked']:contains('角色权限关联')").trigger("click");},function (err){},null)});

jsTree工作笔记001---jsTree的基本使用_js实现树形结构相关推荐

Disruptor本地线程队列_实现线程间通信---线程间通信工作笔记001
Disruptor本地线程队列_实现线程间通信---线程间通信工作笔记001 看到同事用这个东西了,这个挺好用的说是,可以实现,本地线程间的通信,好像在c++和java中都可以用现在没时间研究啊,暂 ...
在win10中使用任务计划程序_设置定时任务---Windows使用技巧工作笔记001
有时候比如,去开机启动一个程序,某个时间启动一个程序等,这种工作还是需要的,但是设置起来也不是那么顺利,具体其实就是一个地方.不好设置...往下看吧,上面,电脑->管理 -->找到任务计 ...
认识什么是运维中的CI/CD---持续集成交付工作笔记001
在软件开发中经常会提到持续集成Continuous Integration(CI)和持续交付Continuous Delivery(CD)这几个术语.但它们真正的意思是什么呢? 在谈论软件开发时,经常 ...
Nginx负载均衡和F5的区别---系统运维工作笔记001
笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处理,静 ...
实时监控Mysql等数据库变化_进行数据同步_了解Maxwell_--MaxWell工作笔记001
1.Maxwell 是一个读取 MySQL binlogs日志,这样就可以知道数据库修改的内容_ 并将修改行字段的更新用json的格式 ,写入 Kafka, Kinesis, RabbitMQ, Go ...
实时监控Mysql等数据库变化_进行数据同步_了解Debezium_--Debezium工作笔记001
1. Debezium是一个开源项目 2.为捕获数据更改(change data capture,CDC)提供了一个低延迟的流式处理平台 3.安装并且配置Debezium去监控你的数据库,应用就可以消 ...
实时监控Mysql数据库变化_进行数据同步_了解Canal_---Canal工作笔记001
1.Canal是阿里巴巴旗下的一款开源项目,纯Java开发. 2.由来:阿里巴巴B2B公司,因为业务的特性,卖家主要集中在国内,买家主要集中在国外,所以衍生出了杭州和美国异地机房的需求,从2010年开 ...
大数据之_数据采集Flume_Flume介绍---Flume工作笔记001
首先,使用flume1.9版本. 需要java基础和hadoop基础,这里的内容大部分,偏向于配置,需要写代码的地方并不是很多.
Android_Kotlin原生开发_认识Kotlin_了解Kotlin和JVM虚拟机关系_认识Kotlin的重要性_更强大的跨平台特性_不需要JVM虚拟机也可跨平台---Kotlin工作笔记001
1.谷歌支持Kotlin作为android第一开发语言,因为java是已经被oracle收购了,可能会对Google收费. 2. 可以看到java语言写的android程序,实际上回编译成字节码,在j ...

jsTree工作笔记001---jsTree的基本使用_js实现树形结构

jsTree工作笔记001---jsTree的基本使用_js实现树形结构相关推荐

最新文章

热门文章