<!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 () {
$("#plugins1").jstree({
"checkbox": {
"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,"checked": true },
"children": [
{
"text": "Child node 11", "id": "11", "state": {
"opened": false,
"checked": true
}
},
{
"text": "Child node 22", "id": "22", "state": {
"opened": false,
"checked": true
},
"children": [
{
"text": "Child node 221", "id": "221", "state": {
"opened": false,
"checked": true
}
},
{
"text": "Child node 222", "id": "222", "state": {
"opened": false,
"checked": true
},
}
]
},
{
"text": "Child node 33", "id": "33", "state": {
"opened": false,
"checked": true
}
}
]
}
]
}
});
//checkbox 选中事件
$(‘#plugins1‘).on("check_node.jstree", function (node, data, event) {
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) {
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;
});
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/guxingy/p/12148215.html
时间： 2024-08-02 02:13:56