jsTree 使用笔记 图标的显示

jsTree 使用笔记 图标的显示

1,引入
在官网下载压缩包,解压后所需文件在dist文件夹下
在这里插入图片描述
themes里是css所需的文件
在文件中引入<link rel="stylesheet" href="dist/themes/default/style.min.css" />
引入js<script src="dist/jstree.min.js"></script>
2,创建示例,监听点击改变触发函数,这些官网上有
我想记录一下jstree的图标,怎么根据类型的不同显示不同的图标

$('#jstree_demo').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : true },
    'data' : {
      'url' : function (node) {
        return node.id === '#' ?
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
      },
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  },
  "types" : {
    "#" : {
      "max_children" : 1,
      "max_depth" : 4,
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.3.8/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ]
});

这是官网的示例代码 plugins插件选项 types就控制着图标
types里可以有很多选项 default是默认图标,如果想全部的图标都不显示,themes里添加:icons:false

	core: {
				themes: { theme: 'classic', icons: false },
				data: companies,
			},

如果想要只是默认的类型不显示

	types: {
				default: {
					icon: false,
				},
			},

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值