jsTree的基本使用方法以及按需装载子节点

2024-01-05 22:58

本文主要是介绍jsTree的基本使用方法以及按需装载子节点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文主要内容:

一、jsTree的基本使用方法;

二、按需装载子节点,即每次展开某节点时,才去服务器装载其子节点。


jsTree是基于jQuery的一个树形插件,该项目主页:http://www.jstree.com/

本文使用版本为   jsTree - v3.3.2 - 2016-08-15 - (MIT),主要参考文档在下载包里的documentation.html文件。


jsTree的基本使用方法:


一、 在页面导入必要的库文件


基本的使用只需要jquery.js和jquery.tree.js两个文件,都在jsTree的下载包里,不同版本的jsTree需要导入的库文件可能不同。


  <script type="text/javascript" src="/Content/javascript/jsTree/jquery.js"></script>

  <script type="text/javascript"   src="/Content/javascript/jsTree/jquery.tree.js"></script>


二、前端Html代码


      <div   id="myTree"></div>   


三、 前端JS代码


<script type="text/javascript">

   (function () {
       $("#myTree").jstree({
                    'core': {
                        data: {
                            'url': '/mpa/PrivateFolder/GetFolder',
                            'data': function (node) {
                                return { 'id': node.id };
                            },
                            "success": function (data) {
                                
                                folderTree.setUnitCount(data.length);
                                return data;
                            }
                        },
                        multiple: false,
                        check_callback: function (operation, node, node_parent, node_position, more) {
                            return true;
                        }
                    },
                    types: {
                        "default": {
                            "icon": "fa fa-folder tree-item-icon-color icon-lg"
                        },
                        "file": {
                            "icon": "fa fa-file tree-item-icon-color icon-lg"
                        }
                    },
                    plugins: [
                        'types',
                        'wholerow',
                          'json_data'
                    ]
                }).on('changed.jstree', function (e, data) {
                    if (data.selected.length != 1) {
                        folderTree.selectedFolder.set(null);
                    } else {
                        var selectedNode = data.instance.get_node(data.selected[0]);
                       
                    }
                });
})();

</script>


四、后台   controller 中的代码


  public async Task<JsonResult> GetFolder(string id)
        {
            GetPrivateFoldersInput input = new GetPrivateFoldersInput();
            if (id == "#")
            {
                input.ParentId = null;
            }
            else
            {
                input.ParentId = long.Parse(id);
            }
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            var list = await _folderAppService.GetPrivateFolders(input);
            var items = list.Items.Select(o => new TreeNode()
            {
                id = o.Id.ToString(),
                parent = o.ParentId == null ? "#" : o.ParentId.ToString(),
                text = "<span title=\"" + o.DisplayName + "\"   data-ou-id=\"" + o.Id.ToString() + "\">" + o.DisplayName + " (<span class=\"ou-text-member-count\">" + o.FileCount + "</span>) </span>",
                children = o.ChildCount > 0 ? true : false
            }).ToList();

            result.Data = items;
         
            return result;
        }


五、JSTree 的节点发生变化后刷新节点


   $("#myTree").jstree('refresh');


这篇关于jsTree的基本使用方法以及按需装载子节点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/574423

相关文章

Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例

《Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx

Python logging模块使用示例详解

《Pythonlogging模块使用示例详解》Python的logging模块是一个灵活且强大的日志记录工具,广泛应用于应用程序的调试、运行监控和问题排查,下面给大家介绍Pythonlogging模... 目录一、为什么使用 logging 模块?二、核心组件三、日志级别四、基本使用步骤五、快速配置(bas

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》:本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》:本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中,变量是用于存储程序中数据

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增