html代码

<div id="jstree1"></div>

js代码:

<script src="__STATIC__/h5/js/jquery.min.js?v=2.1.4"></script>
<script src="https://static.jstree.com/3.3.5/assets/dist/jstree.min.js"></script>
<script>
$(document).ready(function () {
$('#jstree1').jstree({
'core' : {
"animation" : ,
"check_callback" : true,
'force_text' : true,
"themes" : { "stripes" : true },
'data' : {
//"url" : "//www.jstree.com/fiddle/?lazy",
"url":"{:url('img/imgFolder/jsTree')}",
"dataType" : "json",
"data" : function (node) {
return { "id" : node.id }; }
}
},
"plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
}); }); function demo_create() {
var ref = $('#jstree1').jstree(true), sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
};
function demo_rename() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[];
ref.edit(sel); };
function demo_delete(){
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel); //$("#1").remove();
console.log(sel) ref.set_text(, ''); }
</script>

其中data数据格式

$('#jstree1').jstree({ 'core' : {
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
]
} });

jsTree 插件的更多相关文章

  1. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  2. jsTree插件简介(三)

    UI-plugin JSTree的UI插件:用来处理选择.不选和鼠标悬浮树选项的插件. 一.属性包括: 1.select_limit:指定一次可以选中几个节点,默认为-1,表示无限制选中. 2.sel ...

  3. jquery jstree 插件的使用

    最近一个项目 需要用到jstree 这个jQuery插件,就研究了下,做目录树 菜单还是很强大的,下面对经常会用到几个用法做下说明. 1. 首先页面 引用 jquery.jstree 2. html ...

  4. 【笔记】jstree插件的基本使用

    官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式 不需要在重新拼接返回格式 不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...

  5. jstree 插件的使用笔记(一)

    官方:http://www.jstree.com/  一.节点的描述 官方资料:http://www.jstree.com/docs/json/ 格式一 { id : "string&quo ...

  6. JQuery 目录树jsTree插件用法

    PHP循环构造目录树结构 <ul> <php> function digui($fid,$level){ $class=M("wangpan_class") ...

  7. jsTree 插件Ajax数据

    完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  8. 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...

  9. (转)基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    http://www.cnblogs.com/wuhuacong/p/4761637.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JST ...

随机推荐

  1. Liunx下Intel无线网卡驱动安装

    原文: https://blog.csdn.net/u014157776/article/details/78272611 首先查看网卡型号,指令: lspci | grep -i net 如果是In ...

  2. JavaScript高级 面向对象(11)--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

  3. 基于HTML5功能强大的滑块幻灯片

    分享一款功能强大的HTML5滑块幻灯片.这是一款基于jQuery+HTML5实现的图片切换幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cla ...

  4. Web基础 HTML CSS JS JQuery AJAX

    1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...

  5. fast neural style transfer图像风格迁移基于tensorflow实现

    引自:深度学习实践:使用Tensorflow实现快速风格迁移 一.风格迁移简介 风格迁移(Style Transfer)是深度学习众多应用中非常有趣的一种,如图,我们可以使用这种方法把一张图片的风格“ ...

  6. 将html转换为Drupal模板文件的一般步骤

    本篇文章以自定义page.tpl.php文件为例,介绍在Drupal主题开发工作中,将html文件转换为tpl模板文件的一般步骤. 仅保留html文件中body标记之间的内容(不含body标记),其他 ...

  7. [leetcode]Minimum Depth of Binary Tree--二叉树层序遍历的应用

    题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...

  8. android开发(35) fragment和actionbar组合使用。解决不触发onOptionsItemSelected的问题,获得actionbar 的默认 get icon

    先说说我的使用场景: 我写了一个activity,使用了actionbar. 在这个activity中,有fragment,默认先打开一个 homeFragment,点击某个按钮会进入 detailF ...

  9. 如何在ROS中使用PCL(2)

    记录关于我们运行roslaunch openni_launch openni.launch  命令时生成的话题以及这些话题的数据类型便于后期的处理,只有知道它们的数据结构,才能很好的对数据进行处理,我 ...

  10. JVM调优总结(一):基本概念

    一.数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身: 而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对 ...