jstree1 的使用

最新推荐文章于 2023-12-28 10:10:47 发布
最新推荐文章于 2023-12-28 10:10:47 发布
阅读量143 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woxingwoshu_1111/article/details/106731475
版权

js +ajax+servlets+sqlserver

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js TreeDemo</title>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script type="application/javascript" src="dist/jquery-3.5.1.min.js"></script>
<script type="application/javascript" src="dist/jstree.min.js"></script>
<script type="application/javascript" src="dist/jstree/jstree.js"></script>
<script type="application/javascript">
$(function() {
    $('#jstree1').jstree({
    "core":{
    "data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"惠州昇沪科技信息有限公司"},
        {"id":"69","parent":"0","text":"工程"},
        {"id":"6901","parent":"69","text":"工程一部"},
        {"id":"6902","parent":"69","text":"工程二部"},
        {"id":"5","parent":"0","text":"行政"},
        {"id":"71","parent":"0","text":"采购"},
        {"id":"1","parent":"0","text":"技术"}
    ],
    "themes" : {
    "variant" : "large",//加大
    "ellipsis" : true //文字多时省略
    },
    "check_callback" : true
    },"plugins" : [ "wholerow","themes"]
    }).on('select_node.jstree', function(event, data) {
    console.log(data.node);
    }).on('changed.jstree', function(event,data) {
    console.log("-----------changed.jstree");
    console.log("action:" + data.action);
    console.log(data.node);});
});

function create(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
currNode = ref.create_node(currNode, {"type":"file"});
if(currNode) {
ref.edit(currNode);
}}
function rename(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
ref.rename_node(currNode,"rename node222");
}
function del(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
ref.delete_node(currNode);
}
function moveup(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
var prevNode = ref.get_prev_dom(currNode,true);
ref.move_node(currNode,prevNode,'before');
}
function movedown(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点
ref.move_node(currNode,nextNode,'after');
}
/**
*    获取当前所选中的结点
*/
function _getCurrNode(){
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
console.log(sel);
if(!sel.length) { 
console.log("----");
return false; 
}
sel = sel[0];
return sel;
}
</script>
</head>
<body>
    <input type="button" value="create node" οnclick="create();">
    <input type="button" value="rename node" οnclick="rename();">
    <input type="button" value="del node" οnclick="del();">
    <input type="button" value="上移" οnclick="moveup();">
    <input type="button" value="下移" οnclick="movedown();">
    <div id="jstree1" style="width:400px;background:#fff322">
        
    </div>
</body>
</html>

 

woxingwoshu_1111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JsTree 1.0 使用小结
weixin_30332705的博客
08-30 107
　　jsTree 从 0.99版本到1.0版本之间语法和配置发生了很大的变化，且1.0版的文档也不是很详细，给开发带来了一些麻烦。以下是使用jsTree 1.0-rc3的一些小结： 　　版本：jsTree 1.0-rc3 　　主要实现功能：异步加载树、绑定节点的单击事件、配置节点图标、设置节点的开关状态、配置节点class、后台搜索树 1、异步加载树：如果节点下没有子节点，系统会异步...
jsTree工作笔记001---jsTree的基本使用_js实现树形结构
添柴程序猿的专栏
09-27 871
技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152 判断用户有没有选中节点: var treeown = $('#tree_' + own).jstree(true);//获得整个树 if (treeown) { var selectednode = _getCurrNode(own); if (selectednode) ...
JQuery之jsTree树形插件
最新发布
qq_54015925的博客
12-28 2011
jstree相关属性
jsTree 核心功能（core functionality） API
weixin_30735391的博客
11-13 886
由于网站访问慢，所以拷贝了一份到此 https://viky-zhang.gitbooks.io/jstree-doc/content/api-core.html 1. jsTree 核心功能（core functionality） 1.1. $.jstree 包含所有 jstree 相关的函数和变量，包括用于创建、访问、维护实例的类和方法。 + ...
使用jsTree实现js树形结构
06-07
**一、jsTree 的基本使用** 1. **引入 jsTree** 在你的 HTML 文件中，你需要引入 jsTree 的核心 CSS 和 JavaScript 文件。通常，这些文件可以从 jsTree 的官方仓库或者 CDN 服务获取。例如： ```html ...
jsTree使用记录实例
01-19
1. ajax请求生成jsTree [javascript] view plain copy [removed] var r = []; // 权限树中被选中的叶子节点 var currentGroupId; function showPermitTree(id) { currentGroupId = id; $.ajax({ data : ...
手机端js tree
07-20
1. HTML和CSS：在移动端，js Tree通常使用HTML5的`<ul>`和`<li>`元素来构建树形结构。CSS用于布局和样式调整，确保在不同尺寸的屏幕上看起来清晰、易于阅读。 2. JavaScript：js Tree的核心是JavaScript代码，它...
JsTree 实例使用
09-27
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库，专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能，如动态加载、节点...
基于jstree使用AJAX请求获取数据形成树
12-12
1. 初始化jstree，设置核心属性、数据加载方式和类型、状态管理等。 2. 使用`$.ajax`发送GET请求，获取JSON数据。 3. 处理返回的JSON数据，将其转化为jstree所需的格式。 4. 调用jstree的回调函数，将数据传递给js...
JsTree 最详细教程及完整实例
yiding123的专栏
12-16 7631
JsTree 最详细教程及完整实例 JsTree是一个jquery的插件，它提交一个非常友好并且强大的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax方式的动态请求加载数据。 1、支持基于HTML定义、Json、XML方式加载树节点     2、支持拖放，动态增加、删除、重命名树节点     3、支持复选框   ...
强大的动态树插件与jQuery - jsTree
米高的博客
08-24 6036
jsTree是一个功能强大的jQuery插件，用于生成动态的交互式树视图（例如文件夹树），支持内联编辑，拖放，复选框，键盘导航等。 &gt;&gt;&gt;演示    &gt;&gt;&gt;下载 更多功能： 支持HTML和JSON数据。 启用AJAX。 自定义节点图标。 延迟加载。 回调函数。 可搜索和可过滤。 基本用法：  1.安装和下载。 # NPM $ npm ins...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2987
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
jsTree 多级树结构加子节点分页
zimuxin的专栏
09-30 2687
$('#tree') .jstree({ "core" : { "check_callback" : true, 'data' : { "url" : function(data){ return '/admin/ajax/list'; ...
jstree树形菜单
diaomu5377的博客
08-18 140
final 用于声明属性、方法和类，分别表示属性不可变，方法不可重写，类不可继承。其实可以参考用easyui的tree 和 ztree参考：　　https://www.jstree.com/demo/　　https://www.jstree.com/plugins/ <!DOCTYPE html> <html lang="en"> <head&...
jstree使用心得
热门推荐
雪飘雪融的博客
10-19 1万+
jstree官网：https://www.jstree.com/ 1.需要导入的文件 2.在页面上创建一个jstree容器（div） 3.创建一个jstree实例 $('#jstree_demo_div1').jstree({'plugins':["wholerow","checkbox"], 'core' : { 'data' : [ {
js生成tree形组织机构下拉框
weixin_34186950的博客
03-13 377
1.首先我们正常数据是如下所示： [ { id: 1, pid: 0, name: '公司组织' }, { id: 2, pid: 1, name: '总经办' }, { id: 3, pid: 1, name: '人事部' }, { id: 4, pid: 1, name: '生产部' }, { id: 5, pid: 4, name: '现场组' }, { id: 6, pi...
jsTree checkbox plugin使用笔记
weixin_30908707的博客
08-05 100
<link rel="stylesheet" type="text/css" href="js/assets/global/plugins/jstree/dist/themes/default/style.min.css" /> <script type="text/javascript" src="js/assets/global/plugins/jstree/di...
vue-jstree插件使用
09-06
使用 Vue-jstree 插件可以方便地创建树形结构，并且支持拖拽、勾选、搜索等功能。下面是简单的使用示例： 1. 安装依赖： ```bash npm install vue-jstree ``` 2. 在 Vue 组件中引入并注册插件： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

woxingwoshu_1111

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值