【笔记】jstree插件的基本使用
官网地址:https://www.jstree.com/
json返回参数格式:推荐第二种方式 不需要在重新拼接返回格式
不刷新页面重新初始化 jstree时使用:$.jstree.destroy() 注销已初始化的数据
虚线设置:在 plugins中添加wholerow。如: plugins: ["wholerow","contextmenu"] contextmenu是快捷菜单配置
1、拼接子节点格式
// Expected format of the node (there are no required fields) {id : "string" // will be autogenerated if omittedtext : "string" // node texticon : "string" // string for custom state : {opened : boolean // is the node opendisabled : boolean // is the node disabledselected : boolean // is the node selected },children : [] // array of strings or objectsli_attr : {} // attributes for the generated LI nodea_attr : {} // attributes for the generated A node }
2、根据父节点组装,注:parent是父级节点,初始节点为 " # "
// Alternative format of the node (id & parent are required) {id : "string" // requiredparent : "string" // requiredtext : "string" // node texticon : "string" // string for custom state : {opened : boolean // is the node opendisabled : boolean // is the node disabledselected : boolean // is the node selected },li_attr : {} // attributes for the generated LI nodea_attr : {} // attributes for the generated A node }
html
<div id="treeDiv" > </div>
初始化js
$('#treeDiv').jstree({'core': {'data': data//返回的数据 },});
添加右键点击自定义菜单
$('#treeDiv').jstree({'core': {'data': data},plugins: ["contextmenu"],"contextmenu": {"items": {"create": null,"rename": null,"remove": null,"ccp": null,"add": {"label": "add","action": function (obj) {alert("add operation--clickedNode's id is:" + obj);}},"delete": {"label": "delete","action": function (obj) {alert("add operation--clickedNode's id is:" + obj);}}}}});
虚线设置:在 plugins中添加wholerow。如: plugins: ["wholerow","contextmenu"] contextmenu是快捷菜单配置
拖动效果
$("#treeDiv").jstree({"core": {"check_callback": true,"data":data},"plugins": ["dnd"]});
拖动返回事件
$("#treeDiv").on('move_node.jstree', function (e, data) {$.post("modulemng/dndmodule", {id: data.node.id,parent: data.parent,position: data.position}, function (data, status) {alert("Data: " + data + "\nStatus: " + status);});});
初始化完成后展开所有节点
$("#treeDiv").on("ready.jstree", function (e, data) { //树创建完成事件data.instance.open_all(); //展开所有节点});
获取当前选择的节点
$("#treeDiv").on('changed.jstree', function (e, data) { //选中节点改变事件var node = data.instance.get_node(data.selected[0]); //获取选中的节点});
转载于:https://www.cnblogs.com/miskis/p/6118554.html
【笔记】jstree插件的基本使用相关推荐
- Wiz Editor md 为知笔记 Markdown 插件
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Wiz. ...
- jsTree插件简介(三)
UI-plugin JSTree的UI插件:用来处理选择.不选和鼠标悬浮树选项的插件. 一.属性包括: 1.select_limit:指定一次可以选中几个节点,默认为-1,表示无限制选中. 2.sel ...
- jquery jstree 插件的使用
最近一个项目 需要用到jstree 这个jQuery插件,就研究了下,做目录树 菜单还是很强大的,下面对经常会用到几个用法做下说明. 1. 首先页面 引用 jquery.jstree 2. html ...
- jsTree插件简介(一)
在用jsTree时可以使用几种插件来支持我们的行为,下面我简要的介绍下各个插件的使用. 1:html_data plugin. html_data即我们要渲染的数据是用html格式来完成tree的展示 ...
- jsTree插件简介(四)
CRRM plugin 1 本节以例子为基础,讲解jsTree的crrm插件之create功能,如有不当,敬请拍砖!! crrm plugin提供创建.删除.重命名.移动节点功能. 1.创建节点. 首 ...
- kong笔记——自定义插件 目录及部署
kong笔记 目录导航 简述 本文目标: 了解kong插件的基本信息 手动部署自定义插件 注意:本文不涉及自定义插件的开发,仅仅说明自定义插件的目录结构与部署方式 目录结构 基本插件模块 两个必须的文 ...
- jstree插件对树操作增删改查的使用
1.插件说明 jstree官方地址:https://www.jstree.com bootstrap官方地址:https://v3.bootcss.com font-awesome官方地址:http: ...
- firefox的一款记笔记的插件
网文快捕被我抛弃之后,一直很享受与firefox下的scrapbook带给我的迅速记录网页浏览记录的畅快中,但是它真正作为一款知识管理软件还是在功能的丰富性上难以满足我的要求,特别是在浏览网页时想记点 ...
- webscraper多页爬取_【实践】笔记_Chrome插件webscraper爬取天眼通数据
需求:获取指定关键字(母婴)下的公司信息(公司名称.地址.法人.联系方式) 步骤: 一.下载webscraper插件. 通过Chrome浏览器的扩展程序发现发不开Chrome商店,此处提供一个百度云盘 ...
最新文章
- Apache Shiro 框架简介和下载导入
- sqlserver实验心得体会_sqlserver 关于DBCC CHECKDB的总结
- 《天天数学》连载23:一月二十三日
- 图片加载失败显示默认图片占位符
- [转] 基于 Apache Mahout 构建社会化推荐引擎
- 用计算机唱歌 丑八怪乐谱,抖音计算机乐谱有哪些?计算机歌曲乐谱汇总
- android 语音自动播报,Android语音播报的两种简单实现
- HTML排版一首古诗,古诗句排版正确方式
- ACM基础题——小刘认亲
- 集合全套以及知识点整合
- matlab 输出 syms,matlab中latex和syms的完美结合
- 内存卡android文件夹名称,安卓手机内存卡文件夹英文名称解析——第三方应用类...
- 树莓派使用create_ap创建局域网
- 安卓4.4.4安装哪个微信版本_安卓用户喜大普奔!安卓版微信7.0.13内测版发布,支持深色模式!...
- android 开发积累
- 2013计算机学科排名,2013年美国大学排名计算机专业排名情况
- Django进阶教程
- 问题 E: 来淄博旅游
- fiddler 升级后抓取https流量各种失败后一定不要忘记这一招
- python识别火车票二维码_tickets:Python 实现的命令行火车票查看器
热门文章
- CentOS下的账户管理
- 《几何与代数导引》例2.6
- Setting up Jupyter with Python 3 on Ubuntu
- 【数据平台】python中文分词工具jieba
- Java实现算法导论中有限自动机字符串匹配算法
- 关于省客服集中全业务系统IT项目管理的几点分析!
- GCN代码超详解析Two-stream adaptive graph convolutional network for Skeleton-Based Action Recognition(二)
- 线程池的几个重要参数?—— 七大参数
- C# UI界面的更新
- 解决placeholder兼容性问题