JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版
2023-09-11 14:22:27 时间
<!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>
相关文章
- jquery.timers使用说明
- JS框架_(JQuery.js)绚丽的3D星空动画
- JS框架_(JQuery.js)高德地图api
- jQuery选择器案例之——index.js
- jQuery插件 -- Form表单插件jquery.form.js
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
- jQuery源码-美元背后的一点小技巧
- 原生态js单个点击展开收缩和jQuery的写法
- js生成二维码的jquery组件–qrcode
- jQuery EasyUI 折叠面板accordion的使用实例
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- three.js(JS 三维模型库)介绍和入门
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- jQuery操作表格背景色迭代和鼠标移动事件(CSS中使用expression)
- 超详细的jQuery的 DOM操作,一篇就足够!
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- JS和jquery加载的区别
- 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
- JQuery入门