首页 > 其他分享 >jsTree使用

jsTree使用

时间:2022-11-24 17:32:28浏览次数:42  
标签:parent text selected jstree 使用 jsTree data id


jsTree可以显示一个树状视图,支持复选框选中,选中触发事件等:

其中主要用到的方法有:
1.设置数据:
这里的data一般是ajax请求服务器返回的,必须要有id,parent,text这三个字段用于显示,也可以额外返回自己需要的字段。
这里还增加了插件配置:​​​'plugins':["wholerow","checkbox"]​​ 表示在会显示复选框。

//一般data从后台返回,调用这个方法显示视图
$('#jstree_demo_div').jstree({'plugins':["wholerow","checkbox"], 'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : { 'selected' : false },},
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });

2.监听选择选择事件,方法返回一个data,为上面设置jstree显示的data:

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
console.log("selected");
});

3.获取选中的列的对象用如下方法:

$('#jstree_demo_div').jstree().get_selected(true);

如果只想返回ID,那么不用传true参数即可

4.如果一个页面中发出两次ajax请求,调用了两次jstree显示方法,但是第二次显示的结果仍然是第一次的话,那么需要再每次发送ajax请求之前调用destroy方法清空一下jsTree(其实官网上还有一个refresh方法,但是我试了一下并不管用,最后才试出的用这个方法):

$('#jstree_div').jstree("destroy");

完整的代码如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>

<div id="jstree_demo_div"></div>

<button>OK</button>

</body>
<script type="text/javascript">
// 选择的时候调用的方法
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
console.log("selected");
});
//
$('button').on('click', function () {
//get_selected返回选中的列
console.log($('#jstree_demo_div').jstree().get_selected(true));
});

//一般data从后台返回,调用这个方法显示视图
$('#jstree_demo_div').jstree({'plugins':["wholerow","checkbox"], 'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : { 'selected' : false },},
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });
</script>
</html>

页面显示:

jsTree使用_json


标签:parent,text,selected,jstree,使用,jsTree,data,id
From: https://blog.51cto.com/u_15890522/5884399

相关文章

  • redis基本使用
    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sortedset:有序集合)。以下是一些基本用法1.string添加获取setname"xiaoxiaohei"getname获取字串GETR......
  • ILA使用说明
    集成逻辑分析仪(IntegratedLogicAnalyzer:ILA)功能允许用户在FPGA设备上执行系统内调试后实现的设计。当设计中需要监视信号时,应使用此功能。用户还可以使用此功能在硬......
  • Vue中qrcode的使用方法(生成二维码插件) / 前端页面根据URL链接生成二维码
      1.下载npminstallqrcode--save-dev2.引入(在所需要的页面中引入)importQRCodefrom“qrcode”;//引入生成二维码插件3.生成二维码<canvasid="QRCode_head......
  • 在使用百度地图的SDK时,出现.LocationDemo has leaked ServiceConnection 异常并且无法
    Activitycom.example.diarysytsem.LocationDemohasleakedServiceConnectioncom.baidu.location.c@4247e170thatwasoriginallyboundhere这个是因为在配置文件中没......
  • Jenkin安装及使用说明
    介绍Jenkins是基于Java开发的一种持续集成及交付工具,可用于自动打包部署项目内容下载安装官网镜像地址:https://mirrors.jenkins.io/下载地址:https://jenkins.io/......
  • ubuntu 使用入门
    我使用的版本是20.04.1,经验与大家分享:1.安装时subnet设置:192.168.x.0/24   x为你的网关对应值,这只是最常见设置,其它情况未知2.安装完成后需要设置root密码......
  • XAF Blazor 中使用 Blazor 组件
    前言文档标题是不是感觉有点奇怪,但实际我们在XAFBlazor中使用Blazor组件是很繁琐的,我们需要将Blazor组件封装成属性编辑器(PropertyEditor),再用非持久化对象去承载它。当我......
  • 原生mybatis使用细节回顾
    mybatis笔记1、${}和#{}的区别#{}是获取参数的内容支持,索引获取;#{0},parameterType可以是intString之类的。${param1}获取指定位置的参数;======#{0}若是parameterType......
  • 使用selenium定时爬取网页内容-java版本
    使用场景某些网页有反扒机制,使用jsoup和httpclient不能满足要求,使用selenium可以。环境配置​​https://registry.npmmirror.com/binary.html?path=chromedriver/​​下载解......
  • 反汇编逆向工具 ghidra_9.0 类似ida使用教程
    ​​https://github.com/NationalSecurityAgency/ghidra​​​​https://ghidra-sre.org/​​​需要国内下载的可以加群690819833解压压缩包后打开ghidraRun.bat打开后提......