[前端] 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 自定义图标 不同节点 显示不同图标

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

因项目中用到树形展示数据功能,所以决定使用Jstree(jstree_pre1.0_fix_1)辅助前端展示,使用过程中,大部分参考官方doc和demo实现,由于需要自定义节点图片,起初着实纠结了很久...
  • Cmexico
  • Cmexico
  • 2012年12月25日 16:41
  • 6478

jstree学习使用构建树

1在开发的时候会用到树,jstree官网第一次打开后面几天都进不去,为了下次使用不用从头看,特记录学习心得 在 https://github.com/vakata/jstree#the-require...

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

调用的样式 /jstree/3.3.3/themes/default/style.min.css /jquery-treegrid/0.3.0/css/jquery.treegrid.css /...

jstree使用教程

jstree/树形目录/改变图标/点击事件改变打开状态/jstree使用教程/jstree json格式输出/jstree ajax数据...

使用jstree自定义下拉菜单树组件

开发背景:         每次都很啰嗦,要先陈述一下kaifa

jsTree插件简介(二)

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

JQuery树插件JSTree的使用

JSTREE简介: JSTREE是一款基于JQUERY的树形插件,其功能相当强大,尤其是其右键菜单,很轻松地就能实现节点的增加节点、重命名节电、删除节点、复制节点、剪切节点等操作。   使用JS...

jstree的基本应用----记录

未经允许不可转发。

jquery jstree 插件的使用

最近一个项目 需要用到jstree 这个jquery插件,就研究了下,做目录树 菜单还是很强大的,下面对经常会用到几个用法做下说明。 1. 首先页面 引用 jquery.jstree 2. htm...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[前端] jstree自定义图标及常用功能
举报原因:
原因补充:

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