Official website address: https://www.jstree.com/
Plug: https://www.jstree.com/plugins/
Plug checkbox configuration: https://www.jstree.com/api/#/?q=$.jstree.defaults.checkbox&f=$.jstree.defaults.checkbox.tie_selection
var instance = $ ( '# plugins1') jstree (. to true ); // Get Object jstree instance.deselect_all (); // uncheck instance.select_node ('22 '); // check the specified node instance.hide_checkboxes () ; // hide all the CheckBox console.log (instance.get_checked_descendants ( 22)); // Getting child nodes under the current node instance.check_all (); // select all nodes instance.uncheck_all (); // unchecked All nodes console.log (instance.get_checked ( false )); //Get all the selected node parameters: true (return the object) false / null (return IDS) console.log (instance.get_top_checked ()); // get the top level of the selected node
<!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': { // 'the Data': the Data, // 'expand_selected_onload': false, // load the default deployment all the selected node true false checked after completion not expand // 'Themes': { // DOTS: cancel cable to true // // } // }, // plugins: [ "CheckBox", "Themes",], // CheckBox: { // " keep_selected_style ": false, // Leave style true to maintain, false is not saved, the style does not affect the function // 'three_state': true, // associate parent and child nodes, to true association, false is not associated // 'tie_selection' : false, // // 'Whole_node': false, // check box associated with the node associated with false to true is not associated // }, // lang: { // loading: "directory loading ......" // contents to give the user waiting time rendering data, default loading // }, // }); $ ( " # Plugins1 " ) .jstree ({ " the CheckBox " : { // "keep_selected_style": // display the selected style to true // "keep_selected_style": false, // Leave style true to maintain, false is not saved, the style does not affect the function ' three_state ' : true , // parent and child nodes associated with, related to true, false not being associated with ' tie_selection ' : false , // ' whole_node ' : false , // check box associated with the node associated with false to true is not associated }, " plugins " : [ " checkBox " ], // load the plug checkBox ' Core ' : { 'expand_selected_onload ' : true , // load the default deployment after the completion of all the selected node is selected true false is not expanded ' Themes ' : { DOTS: to true // cancel cable }, ' 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 } } ] } ] } }); // the CheckBox selected event $ ( ' # plugins1 ' ) .on ( " check_node.jstree " , function (the Node, the Data, Event) { // console.log (the Data); // // Note: This is considered a bug problem right // console.log (data.selected); // get all the selected nodes // The following get selected nodes no problem var instance = $ ( ' # plugins1 ' ) .jstree ( to true ); // get the object jstree console.log (instance.get_checked ( false )); // get all the selected nodes parameters: true (returns the object) false / null (return ids) var d = instance.get_checked(false); var i = 1; }); // the CheckBox unchecked event $ ( ' # plugins1 ' ) .on ( " uncheck_node.jstree " , function (the Node, the Data, Event) { //console.log(data); // // Note: This is considered a bug problem right // console.log (data.selected); // get all the selected nodes // The following get selected nodes no problem var instance = $ ( ' # plugins1 ' ) .jstree ( to true ); // get the object jstree console.log (instance.get_checked ( false )); // get all the selected nodes parameters: true (returns the object) false / null (return 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')) { // the console.log (data.node.children_d); // all the selected child node (current node does not contain the ) // } // console.log (data.selected); // all currently selected tree node (including the current node) //}); // the setTimeout (function () { // var instance = $ ( '# plugins1') jstree (to true);. Jstree // Get the object // //instance.deselect_all();// deselect // // instance .select_node ('22 '); // check the specified node // //instance.hide_checkboxes();// hide all checkbox // //console.log(instance.get_checked_descendants (22 is)); // Get the current node subnode // //instance.check_all();// select all nodes // //instance.uncheck_all();// uncheck all nodes // //console.log(instance.get_checked(false));// get all the selected node parameters: true (return the object) false / null (return ids) // //console.log(instance.get_top_checked());// get top selected node //}, 1000); }); </script> </body> </html>