JQuery/JS插件 jsTree 常用方法
2021-05-01 02:28
标签：ons charset top end default root 影响 lan 问题 官网地址：https://www.jstree.com/ API：https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection 插件：https://www.jstree.com/plugins/ 插件checkbox的配置：https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection JQuery/JS插件 jsTree 常用方法 标签：ons charset top end default root 影响 lan 问题 原文地址：https://www.cnblogs.com/guxingy/p/12148387.html 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 常用方法
文章链接：http://soscw.com/index.php/essay/80670.html