本文摘要：jstreeDemo项目是一个基于JavaScript树形菜单插件jstree的应用实例，通过初始化函数init加载并配置jstree的核心功能及多种插件（如搜索、状态、类型等）。项目通过jstree_fun函数实现节点的动态加载、样式切换以及对打开、关闭、激活、创建、重命名和删除节点事件的监听处理。此外，还提供了node_create、node_rename、node_delete三个辅助函数以方便用户执行特定的节点操作。数据源来自data.json文件，整个项目可通过GitHub获取，并支持根据需求进行灵活配置与扩展。

转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_27717967/article/details/79167605。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

1、插件说明

jstree官方地址：https://www.jstree.com
bootstrap官方地址：https://v3.bootcss.com
font-awesome官方地址：http://www.fontawesome.com.cn/faicons/
github项目地址：https://github.com/chengchuanqiang/jstreeDemo

2、jstreedemo主要文件

2.1、html页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jstree demo</title><link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" /><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />  <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />  
</head>
<body><div class="container">  <div class="row" style="height: 100px;"></div><div class="row"><div >  <button class="btn btn-info" removed="node_create()"> 新增 </button><button class="btn btn-info" removed="node_rename()"> 编辑</button><button class="btn btn-info"  removed="node_delete()"> 删除</button></div></div><div class="row" style="height: 5px;"></div><div class="row">  <div class="col-md-3">  <!-- 描述：搜索框 -->  <div class="input-group row">  <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-screenshot"></i></span>  <input type="text" class="form-control" placeholder="请输入功能名称..." id="search_ay" aria-describedby="basic-addon1">  </div>  <!--描述：jstree 树形菜单容器-->  <div id="jstree_demo_div" class="row">  </div>  </div>  <div lass="col-md-9">  <button class="btn btn-tab" var='json/data.json'>data.json</button> <!--点击切换资源-->  <button class="btn btn-tab" var='json/data2.json'>data2.json</button> <!--点击切换资源-->  <button class="btn refresh "><i class="glyphicon glyphicon-refresh"></i></button> <!--点击刷新资源-->  </div>  </div>  </div> <script src="jquery/jquery.min.js"></script><script src="jstree/dist/jstree.min.js"></script><script src="jstreeDemo.js?20180125"></script></body>
</html>

2.2、jstreeDemo.js代码

function jstree_fun(url){var $tree = $("#jstree_demo_div").jstree({"core":{//'multiple': false,  // 是否可以选择多个节点//"check_callback": true, //    允许拖动菜单  唯一 右键菜单"check_callback" : true,//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)"themes" : { "stripes" : true },//主题配置对象,表示树背景是否有条带"data" : {//'url' : url,//'data' : function(node){//return { 'id' : node.id };//}"url" : url,"dataType" : "json"},"check_callback" : function(operation, node, node_parent, node_position, more){if(operation === "move_node"){var node = this.get_node(node_parent);if(node.id === "#"){alert("根结点不可以删除");return false;}if(node.state.disabled){alert("禁用的不可以删除");return false;} }else if(operation === "delete_node"){var node = this.get_node(node_parent);if(node.id === "#"){alert("根结点不可以删除");return false;} }return true;} },"plugins": [ //插件  "search", //允许插件搜索  // "sort", //排序插件  "state", //状态插件  "types", //类型插件  "unique", //唯一插件  "wholerow", //整行插件"contextmenu"],types:{  "default": { //设置默认的icon 图  "icon": "glyphicon glyphicon-folder-close",  }  } });$tree.on("open_node.jstree", function(e,data){ //监听打开事件var currentNode = data.node;  data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-open"); });$tree.on("close_node.jstree", function(e,data){ //监听关闭事件 var currentNode = data.node;  data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-close"); });$tree.on("activate_node.jstree", function(e, data){var currentNode = data.node; //获取当前节点的json .node  //alert(currentNode.a_attr.id)   //alert(currentNode.a_attr.href) //获取超链接的  .a_attr.href "链接"  .a_attr.id ID  //alert(currentNode.li_attr.href) //获取属性的  .li_attr.href "链接"  .li_attr.id ID  });// 创建$tree.on("create_node.jstree", function(e, data){alert("创建node节点");});// 修改$tree.on("rename_node.jstree", function(e, data){alert("修改node节点");});// 删除$tree.on("delete_node.jstree", function(e, data){alert("删除node节点");});// 查询节点名称var to = false;$("#search_ay").keyup(function(){if(to){clearTimeout(to);}to = setTimeout(function(){$tree.jstree(true).search($('#search_ay').val()); //开启插件查询后 使用这个方法可模糊查询节点  },250);});$('.btn-tab').click(function(){ //选项事件   //alert($(this).attr("var"))  $tree.jstree(true).destroy();   //可做联级  $tree = jstree_fun($(this).attr("var"));//可做联级  //alert($(this).attr("var"))              });  $('.refresh').click(function(){ //刷新事件  $tree.jstree(true).refresh ()  });  return $tree; 
}function node_create(){var ref = $("#jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];sel = ref.create_node(sel);if(sel){ref.edit(sel);  }
}function node_rename(){var ref = $("#jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];ref.edit(sel);
}function node_delete(){var ref = $("#jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];if(ref.get_node(sel).parent=='#'){alert("根节点不允许删除");return;}ref.delete_node(sel);
}// 初始化操作
function init(){var $tree = jstree_fun("json/data.json");
}
init();

3、图片效果展示

这里写图片描述

本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_27717967/article/details/79167605。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

jstree：jstree是一个基于JavaScript的开源库，主要用于构建交互式的树形菜单、导航结构以及展示具有层级关系的数据。在文章中，jstree被用于创建一个动态加载、可编辑、支持多种操作（如新增、编辑、删除等）和搜索功能的树形组件，并通过配置不同的插件以实现丰富的功能扩展。

AJAX：Asynchronous JavaScript and XML（异步JavaScript与XML），是一种创建快速动态网页的技术。在本文语境下，AJAX用于实现在用户界面与服务器之间异步交换数据，使得jstree能够不刷新整个页面的情况下从data.json文件获取并更新树形结构的数据。

Font-Awesome：Font-Awesome是一套流行的图标字体库，提供了一种方便的方式来使用矢量图形图标代替传统的图片图标。在jstreeDemo项目中，利用Font-Awesome为不同类型的节点设置自定义图标，从而增强树形菜单的视觉表现力和用户体验。

Bootstrap：Bootstrap是Twitter推出的一个用于快速开发Web应用程序和网站的开源前端框架，它包含了CSS和JavaScript组件。在文中提到的jstreeDemo项目中，Bootstrap可能作为项目的UI框架，负责整体布局和样式设计，与jstree插件共同协作，构建美观且响应式的设计效果。

contextmenu：在jstree插件中，contextmenu是一个用来实现右键菜单功能的插件。当用户在树形菜单中的节点上右击时，可以弹出一个自定义菜单，包含针对该节点的一系列操作选项，如编辑、删除等，在jstreeDemo项目中增强了用户的交互体验。