基本信息
源码名称：简单的JsTree 树形视图 checkbox demo
源码大小：1.05KB
文件格式：.zip
开发语言：js
更新时间：2020-09-06
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<html lang="en"> <head> <meta charset="UTF-8"> <title>jstree</title> <link href="../css/plugins/jsTree/style.min.css" rel="stylesheet"> </head> <body> <div class="ibox-content"> <div id="using_json"></div> </div> <input type="button" value="打开选择的id" onclick="openId();"> </body> <script src="../js/jquery.min.js?v=2.1.4"></script> <script src="../js/plugins/jsTree/jstree.min.js"></script> <script> function openId(){ //获取选中的节点 var nodes=$("#using_json").jstree("get_checked"); alert(nodes); } $(function(){ $("#using_json").jstree({ "core": { "data": ["Empty Folder", { "id":1, "text": "Resources", "state": { "opened": true }, "children": [{ "id":2, "text": "css", "children": [{ "id":3, "text": "animate.css", "icon": "none" }, { "id":4, "text": "bootstrap.css", "icon": "none" }, { "id":5, "text": "main.css", "icon": "none" }, { "id":6, "text": "style.css", "icon": "none" }], "state": { "opened": true } }, { "id":20, "text": "js", "children": [{ "id":7, "text": "bootstrap.js", "icon": "none" }, { "id":8, "text": "hplus.min.js", "icon": "none" }, { "id":9, "text": "jquery.min.js", "icon": "none", "state":{ "selected":true } }, { "id":10, "text": "jsTree.min.js", "icon": "none" }, { "id":11, "text": "custom.min.js", "icon": "none" }], "state": { "opened": true } }, { "id":17, "text": "html", "children": [{ "id":12, "text": "layout.html", "icon": "none" }, { "id":13, "text": "navigation.html", "icon": "none" }, { "id":14, "text": "navbar.html", "icon": "none" }, { "id":15, "text": "footer.html", "icon": "none" }, { "id":16, "text": "sidebar.html", "icon": "none" }], "state": { "opened": true } }] }, "Fonts", "Images", "Scripts", "Templates", ] }, "checkbox" : { "keep_selected_style" : false }, "plugins" : [ "wholerow", "checkbox" ] }) }); </script> </html>
简单的JsTree 树形视图 checkbox demo
<html lang="en"> <head> <meta charset="UTF-8"> <title>jstree</title> <link href="../css/plugins/jsTree/style.min.css" rel="stylesheet"> </head> <body> <div class="ibox-content"> <div id="using_json"></div> </div> <input type="button" value="打开选择的id" onclick="openId();"> </body> <script src="../js/jquery.min.js?v=2.1.4"></script> <script src="../js/plugins/jsTree/jstree.min.js"></script> <script> function openId(){ //获取选中的节点 var nodes=$("#using_json").jstree("get_checked"); alert(nodes); } $(function(){ $("#using_json").jstree({ "core": { "data": ["Empty Folder", { "id":1, "text": "Resources", "state": { "opened": true }, "children": [{ "id":2, "text": "css", "children": [{ "id":3, "text": "animate.css", "icon": "none" }, { "id":4, "text": "bootstrap.css", "icon": "none" }, { "id":5, "text": "main.css", "icon": "none" }, { "id":6, "text": "style.css", "icon": "none" }], "state": { "opened": true } }, { "id":20, "text": "js", "children": [{ "id":7, "text": "bootstrap.js", "icon": "none" }, { "id":8, "text": "hplus.min.js", "icon": "none" }, { "id":9, "text": "jquery.min.js", "icon": "none", "state":{ "selected":true } }, { "id":10, "text": "jsTree.min.js", "icon": "none" }, { "id":11, "text": "custom.min.js", "icon": "none" }], "state": { "opened": true } }, { "id":17, "text": "html", "children": [{ "id":12, "text": "layout.html", "icon": "none" }, { "id":13, "text": "navigation.html", "icon": "none" }, { "id":14, "text": "navbar.html", "icon": "none" }, { "id":15, "text": "footer.html", "icon": "none" }, { "id":16, "text": "sidebar.html", "icon": "none" }], "state": { "opened": true } }] }, "Fonts", "Images", "Scripts", "Templates", ] }, "checkbox" : { "keep_selected_style" : false }, "plugins" : [ "wholerow", "checkbox" ] }) }); </script> </html>