JQuery/JS插件 jsTree 常用方法
Posted guxingy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery/JS插件 jsTree 常用方法相关的知识，希望对你有一定的参考价值。
插件：https://www.jstree.com/plugins/
插件checkbox的配置：https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection
var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象 instance.deselect_all();//取消选中 instance.select_node(‘22‘);//选中指定节点 instance.hide_checkboxes();//隐藏所有的checkbox console.log(instance.get_checked_descendants (22));//获取 当前节点下的 子节点 instance.check_all();//选中 所有节点 instance.uncheck_all();//取消选中的 所有节点 console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids） console.log(instance.get_top_checked());//获取顶层选中的节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="plugins1"></div> <link href="dist/themes/default/style.min.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="dist/jstree.min.js"></script> <script type="text/javascript"> //Checkbox plugin $(function () { //$(‘#jstreeModule1111‘).jstree({ // ‘core‘: { // ‘data‘: data, // ‘expand_selected_onload‘: false,//加载完成后默认展开所有选中节点true为选中 false为不展开 // ‘themes‘: { // dots: true //取消连接线 // } // }, // plugins: ["checkbox", "themes",], // checkbox: { // "keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能 // ‘three_state‘: true,//父子节点关联，true为关联，false为不关联 // ‘tie_selection‘: false, // // ‘whole_node‘: false,//复选框与节点关联 true 为关联 false为不关联 // }, // lang: { // loading: "目录加载中……" //在用户等待数据渲染的时候给出的提示内容，默认为loading // }, //}); $("#plugins1").jstree({ "checkbox": { //"keep_selected_style": true//显示选中的样式 //"keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能 ‘three_state‘: true,//父子节点关联，true为关联，false为不关联 ‘tie_selection‘: false, // ‘whole_node‘: false,//复选框与节点关联 true 为关联 false为不关联 }, "plugins": ["checkbox"],//加载插件 checkbox ‘core‘: { ‘expand_selected_onload‘: true,//加载完成后默认展开所有选中节点true为选中 false为不展开 ‘themes‘: { dots: true //取消连接线 }, ‘data‘: [ { "text": "Root node 1", "id": "1", "state": { "opened": true }, "children": [ { "text": "Child node 11", "id": "11", "state": { "opened": true, //"selected": false//默认不选中 } }, { "text": "Child node 22", "id": "22", "state": { "opened": true, //"selected": true,//默认选中 //"checked": true }, "children": [ { "text": "Child node 221", "id": "221", "state": { "opened": true } }, { "text": "Child node 222", "id": "222", "state": { "opened": true }, } ] }, { "text": "Child node 33", "id": "33", "state": { "opened": true, //"selected": true,//默认选中 //"checked": true } } ] } ] } }); //checkbox 选中事件 $(‘#plugins1‘).on("check_node.jstree", function (node, data, event) { //console.log(data); ////注意：这个是有问题的 算是bug吧 //console.log(data.selected);//获取 选中的 所有节点 //下面这个 获取选中的节点没问题 var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象 console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids） var d = instance.get_checked(false); var i = 1; }); //checkbox 取消选中事件 $(‘#plugins1‘).on("uncheck_node.jstree", function (node, data, event) { //console.log(data); ////注意：这个是有问题的 算是bug吧 //console.log(data.selected);//获取 选中的 所有节点 //下面这个 获取选中的节点没问题 var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象 console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids） var d = instance.get_checked(false); var i = 1; }); //$(‘#plugins1‘).on("changed.jstree", function (e, data) { // console.log(data); // if (data.hasOwnProperty(‘node‘) && data.node.hasOwnProperty(‘children_d‘)) { // console.log(data.node.children_d);//所有选中的子节点（不包含当前节点） // } // console.log(data.selected);//当前tree 所有选中的 节点（包含当前节点） //}); //setTimeout(function () { // var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象 // //instance.deselect_all();//取消选中 // //instance.select_node(‘22‘);//选中指定节点 // //instance.hide_checkboxes();//隐藏所有的checkbox // //console.log(instance.get_checked_descendants (22));//获取 当前节点下的 子节点 // //instance.check_all();//选中 所有节点 // //instance.uncheck_all();//取消选中的 所有节点 // //console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids） // //console.log(instance.get_top_checked());//获取顶层选中的节点 //}, 1000); }); </script> </body> </html>
以上是关于JQuery/JS插件 jsTree 常用方法的主要内容，如果未能解决你的问题，请参考以下文章