jstree插件对树操作增删改查的使用

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" onclick="node_create()"> 新增 </button><button class="btn btn-info" onclick="node_rename()"> 编辑</button><button class="btn btn-info"  onclick="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、图片效果展示

jstree插件对树操作增删改查的使用相关推荐

数据库的操作增删改查 mysql
数据库的操作增删改查 mysql 登陆数据库查看全部的数据库系统提供的库,除了 test 是给我们练手的其它的不要碰 mysql库,保存了系统重要内容,比如帐户 root帐户的用户名,密码,就 ...
Mongodb命令操作增删改查
Mongodb命令操作增删改查需求描述新增5 人查询修改删除数据结构 {"_id" : ObjectId("59f938235d93fc4af8a37114& ...
NodeJS里如何连接MySQL并分别操作增删改查
本文简介 Node.js 里连接 MySQL ,并分别操作增删改查 . 你需要在电脑里安装一下 MySQL ,最好再安装一个数据库管理工具.我使用的是 MySQL Workbench ,这是一款 My ...
MySQL 之基础操作增删改查等
一:MySQL基础操作使用方法: 方式一: 通过图型界面工具,如 Navicat,DBeaver等方式二: 通过在命令行敲命令来操作 SQL ( Structure query language ...
实现组织树和增删改查国电南瑞前端考试题目
前言这是一个非常基础的组织树前端项目,不需要搭建环境,只需要引入一个 vue 库即可,复制粘贴代码块到 TXT 文本另存为 html 双击打开就能用. 我是没想到这次考试内容居然是在 A4 纸上 ...
Django 07模型层—单表操作(增删改查)
单表查询一.数据库相关设置 ''' # Mysql连接配置 DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': ...
java对mysql的简单操作——增删改查的总结
增删改查的详细内容可以点击以下链接: java对mysql的简单操作--增加数据 java对mysql的简单操作--删除数据 java对mysql的简单操作--修改数据 java连接mysql5.1教 ...
PHP：ThinkPHP5数据库操作增删改查-Model类
1.Model的命名规范一般model的名字和表名是对应的,例如表名 pre_user -> 模型名 User.php User 表名 pre_user_info -> 模型名 Use ...
Hibernate修改操作删除操作查询操作增加操作增删改查 Hibernate增删查改语句...
我用的数据库是MySQL,实体类叫User public class User {private Integer uid;private String username;private String ...

jstree插件对树操作增删改查的使用

1、插件说明

2、jstreedemo主要文件

3、图片效果展示

jstree插件对树操作增删改查的使用相关推荐

最新文章

热门文章