jquery jstree实现带右键菜单的目录树结构效果代码
代码语言:html
所属分类:其他
代码描述:jquery jstree实现带右键菜单的目录树结构效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Simple jsTree</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/themes/default/style.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jstree.js"></script> <script type="text/javascript"> $(function () { var jsondata = [{ "id": "ajson1", "parent": "#", "text": "我的文档" }, { "id": "ajson2", "parent": "#", "text": "我的图片" }, { "id": "ajson3", "parent": "ajson2", "text": "2019年拍的" }, { "id": "ajson4", "parent": "ajson2", "text": "2020年拍的" }, ]; createJSTree(jsondata); }); function createJSTree(jsondata) { $('#SimpleJSTree').jstree({ "core": { "check_callback": true, 'data': jsondata }, "plugins": ["contextmenu"], "contextmenu": { "items": function ($node) { var tree = $("#SimpleJSTree").jstree(true); return { "Create": { "separator_before": false, "separator_after": true, "label": "新建", "action": false, "submenu": { "File": { "seperator_before": false, "seperator_after": false, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0