[前端] jstree自定义图标及常用功能

原创 2015年07月07日 15:56:12

研究了好长时间jstree,也百度了好多,最终实现了项目中的效果,不容易,下面分享下自己的成果。。。

jstree是三方的树状分级菜单

http://www.jstree.com/  官方网站  由于是国外的网站,所以打开的时候不是很稳定,这时候需要一个翻墙插件,谷歌浏览器自带的Proxy SwitchySharp可以实现翻墙,具体方法,点击查看

jstree主要引入两个文件jquery.min.js 、jstree.min.js  其它就是引入对应的样式和图片了

要实现在效果:


首先要有个容器  

<div id="menuTree"></div>

然后就是向这个容器添加内容

/* 树状菜单 */
   // JSON数据
   var jsonData =  [
      { 
         "text" : "所有服务器", 
         "state" : { "opened" : true },
         "children" : [
            {
                "text" : "昆明机场",
                "state" : { "opened" : true },
                "children" : [
                  { 
                     "text" : "机务" ,
                      "state" : { "opened" : true },
                      "children" : [
                        { "text" : "AC3456","icon": "images/state/icon-online.png" },
                        { "text" : "AC3456","icon": "images/state/icon-online.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-warning.png" },
                        { "text" : "AC3456","icon": "images/state/icon-warning.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                        { "text" : "AC3456","icon": "images/state/icon-offline.png" },
                      ]
                  },
                  { "text" : "其他" }
                ]
            },
            { "text" : "上海机场" }
         ]
      }
   ];

   $('#menuTree').jstree({
      plugins : ["checkbox","types","themes","state"],  // state保存选择状态
      "types": {
          "default" : {
            "icon" : false  // 关闭默认图标
          },
      },
      'core' : {
         "themes" : { "stripes" : true },  // 条纹主题
         'data' : jsonData
      }
   });

附加:点击文字实现其他操作( 找到这个实现方式好找时间 )

$('#menuTree').jstree({
    plugins : ["checkbox","types","themes","state"],  // state保存选择状态
    "types": {
        "default" : {
            "icon" : false  // 删除默认图标
        },
    },
    "checkbox":{  // 去除checkbox插件的默认效果
        tie_selection : false,
        keep_selected_style : false,
        whole_node : false
    },
    'core' : {
        "themes" : { "stripes" : true },  // 条纹主题
        'data' : jsonData
    }
}).on('click.jstree', function() {
    console.log(1);
});

当然jstree的使用不止这些,更多的使用方法还请查看jstree官网API和插件使用。。

谢谢关注!



JSTree 自定义图标 不同节点 显示不同图标

JSTree 自定义图标 不同节点 显示不同图标
  • wengyupeng
  • wengyupeng
  • 2017年08月28日 00:51
  • 1254

jsTree 使用笔记

ajax 初始化 JsTree  var $element = $('#Tree'); $element.jstree({ "core" : { "themes" : { "respon...
  • tcytcy123
  • tcytcy123
  • 2017年04月20日 13:56
  • 715

jstree使用教程

jstree/树形目录/改变图标/点击事件改变打开状态/jstree使用教程/jstree json格式输出/jstree ajax数据...
  • u012954072
  • u012954072
  • 2016年11月23日 21:10
  • 9622

jsTree插件简介(二)

1、themes plugin (jsTree的主题插件) 这个插件控制这jsTree的展示,如果没有这个插件,一个jsTree树结构就是一个有序的列表 属性: theme:给树结构应用的样式,...
  • yizhizouxiaqu
  • yizhizouxiaqu
  • 2012年04月14日 17:14
  • 9291

Jstree点击,双击,样式,用法

调用的样式 /jstree/3.3.3/themes/default/style.min.css /jquery-treegrid/0.3.0/css/jquery.treegrid.css /...
  • Steven_Zc
  • Steven_Zc
  • 2017年05月08日 10:06
  • 1290

jsTree 预览 与入门

概述: 在做权限需要使用jsTree,顺便学习翻译部分一下jsTree,jsTree是jquery插件,它提供可以交互的树形结构。在MIT许可下,它具有完全免费的,开源和分布式的特点,jsTree也...
  • m0_37355951
  • m0_37355951
  • 2017年07月17日 18:00
  • 276

jstree中文github文档

jstree是一个基于JQUERY的树形控件
  • qq_24472595
  • qq_24472595
  • 2017年04月11日 15:22
  • 21872

jsTree例子2-theme-plugin

  • 2012年04月14日 17:13
  • 149KB
  • 下载

jstree 默认展开所有节点方法

在jstree初始化之前绑定方法 .bind("loaded.jstree", function (e, data) { data.inst.open_all(-1); // -1 opens all...
  • hm446434459
  • hm446434459
  • 2011年04月20日 17:28
  • 12693

Jstree树形控件实现树形结构展示+自定义节点图标

因项目中用到树形展示数据功能,所以决定使用Jstree(jstree_pre1.0_fix_1)辅助前端展示,使用过程中,大部分参考官方doc和demo实现,由于需要自定义节点图片,起初着实纠结了很久...
  • Cmexico
  • Cmexico
  • 2012年12月25日 16:41
  • 6727
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[前端] jstree自定义图标及常用功能
举报原因:
原因补充:

(最多只允许输入30个字)