自定义js树上的图标 [英] Customise icons on js tree

问题描述

我想添加一个用于关闭和展开的文件夹打开关闭图标，以及一个用于叶节点的叶子图标.

I want to add a folder open close icon for closing and expanding and a leaf icon for the leaf nodes.

请帮助

编辑:

试图添加类型插件，但似乎不起作用.

Tried adding the types plugin but doesn't seem to work.

  var data = {
      'core': {
          'data': dataObj
      },
      "search": {
          "case_insensitive": true,
          "show_only_matches": true
      },
      "plugins": ["search", "themes"]
  };
  $('#jstree_category').jstree(data);
  $('#jstree_category').on("loaded.jstree", function (e, data) {
      _this.treeLoaded = true;
      if (!_this.dataFetched) {
          return;
      }
  });
   // bind customize icon change function in jsTree open_node event.
  $('#jstree_category').on('open_node.jstree', function (e, data) {
      $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
          .removeClass('glyphicon glyphicon-folder-close').addClass('glyphicon glyphicon-folder-open');
      $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon')
          .addClass('glyphicon glyphicon-leaf');
  });
   // bind customize icon change function in jsTree close_node event.
  $('#jstree_category').on('close_node.jstree', function (e, data) {
      $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
          .removeClass('glyphicon glyphicon-folder-open').addClass('glyphicon glyphicon-folder-close');
      $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon')
          .addClass('glyphicon glyphicon-leaf');
  });

推荐答案

在这里为您工作.您应该在JSON dataObj中提及您节点的类型.

Here is working fiddle for you. You should mention the type of your node in JSON dataObj.

var jsonData = [
  {
    id  : 1,
    text : "Folder 1",
    type: "root",
    state : {
      selected  : false
    },
    children    : [
      {
        id  : 2,
        text : "Sub Folder 1",
        type: "child",
        state : {
          selected  : false
        },  
      },
      {
        id  : 3,
        text : "Sub Folder 2",
        type: "child",
        state : {
          selected  : false
        },  
      }
    ]
  }, 
  {
    id: 4,
    text : "Folder 2",
    type: "root",
    state : {
      selected : true
    },
    children : []
  }
];

$('#jstree-tree')
  .jstree({
  core: {
    data: jsonData
  },
  types: {
    "root": {
      "icon" : "glyphicon glyphicon-plus"
    },
    "child": {
      "icon" : "glyphicon glyphicon-leaf"
    },
    "default" : {
    }
  },
  plugins: ["search", "themes", "types"]
}).on('open_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-minus"); 
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-plus"); });

JSFiddle

这篇关于自定义js树上的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！