关闭

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

标签: 前端
6881人阅读 评论(0) 收藏 举报
分类:

研究了好长时间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和插件使用。。

谢谢关注!



0
4

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:185724次
    • 积分:3301
    • 等级:
    • 排名:第10647名
    • 原创:128篇
    • 转载:86篇
    • 译文:0篇
    • 评论:34条
    文章分类
    最新评论