在项目中集成应用jsTree,自定义右键菜单

1. jsTree 官方地址: www.jstree.com

2. 在界面中引用jsTree的css和js

3. 界面应用js的两种方式:

3-1. 先用模板生成HTML结构数据,再用JS去应用


HTML数据已经生成以后,再应用JS


注意:jsTree的插件会改变原来的HTML界面元素,可能会破坏数据绑定关系(如果你用了Vue或者AngularJS或者Backbone什么的框架的话)

3-2 用JS直接去生成


用JS直接去生成


4. 自定义右键菜单:

右键菜单Demo可以看到第一个代码截图的contextmenu中定义,具体不赘述。

如果要不同的选项上,定义不同的右键菜单,一下是源码中定义的右键菜单中的属性:

`separator_before` - a boolean indicating if there should be a separator before this item

`separator_after` - a boolean indicating if there should be a separator after this item

`_disabled` - a boolean indicating if this action should be disabled

`label` - a string - the name of the action (could be a function returning a string)

`title` - a string - an optional tooltip for the item

`action` - a function to be executed if this item is chosen, the function will receive

`icon` - a string, can be a path to an icon or a className, if using an image that is in the current directory use a `./` prefix, otherwise it will be detected as a class

`shortcut` - keyCode which will trigger the action if the menu is open (for example `113` for rename, which equals F2)

`shortcut_label` - shortcut label (like for example `F2` for rename)

`submenu` - an object with the same structure as $.jstree.defaults.contextmenu.items which can be used to create a submenu - each key will be rendered as a separate option in a submenu that will appear once the current item is hovered

说明:

我搜索了网上的解决方法,没有什么有用的,有用visible属性的,但是我看插件中定义没有这个对象属性,可以用_disabled去定义某一项菜单有没有效,不能控制其选择性的展示,暂时没有找到好的办法,如果有好的办法,欢迎告知,谢谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容