jstree树形文件夹用vue.js组件格式做出来
2017-01-09 14:10
519 查看
jstree树状文件夹
首先在官网下载jsTree或使用CDNJS。（如果您选择下载-所有你需要的文件是在dist/下载文件夹中）
1. 在index文件中引入CDN（style.min.css/jquery.min.js/jstree.min.js）
2. 创建一个jstree.html文件来设置一个容器。
3. 创建一个json文件，代码格式如下：
4. 创建一个jstree.js文件，Ajax引入刚刚写好的json文件，代码如下：
5. 在root.js文件内引入刚刚做好的jstree.js的vue组件。
6. 用components加载这个组件，然后再到root.html文件里面引入这个组件标签。
7. 网站上面显示就会是这样。
8. 然后要给文件加一点样式，比如说修改一下文件夹的图标，先创建一个message文件夹，存放图标照片的地方，然后在网上下载一些图标，在json文件里面用“icon”引入照片，代码如下：
9. 保存了刷新一下，页面上显示就是这样。
10. 换了图标是不是看起来很漂亮了，下面我们再来给文件夹创建一个搜索框，首先在文件里面创建一个input输入框，设定好id。
11. 在jstree.js文件内’plugins’插件中添加”search”，然后定义搜索事件，代码如下：
12. 保存刷新，页面上就会显示这样，你在搜索框输入文件夹的名字就直接给你跳转到你要搜索的文件夹地址，是不是很方便。
13. 再如果给文件夹加入一个点右键可以创建、修改、删除的功能，在json文件内加入“check_callback”：true， 刷新页面，你再用鼠标右键点击创建文件夹，修改、删除文件夹都行。
还有一些样式我就不一 一说明了，官网上面有例子，可以参照去做做，会有你意想不到的惊喜哦。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jstree树形文件夹用vue.js组件格式做出来
- vue.js树形组件详解，删除双击增加分支
- 用Vue.js递归组件构建一个可折叠的树形菜单
- vue.js树形组件详解，删除双击增加分支
- vue.js树形组件之删除双击增加分支实例代码
- Vue.js递归组件构建树形菜单
- Vue.js 递归组件实现树形菜单
- 用Vue.js递归组件构建一个可折叠的树形菜单
- 用 Vue.js 递归组件实现可折叠的树形菜单(demo)
- 面向对象的js 树形组件 JSTree。
- Vue.js 递归组件实现树形菜单（实例分享）
- Vue.js组件tree实现无限级树形菜单
- 用Vue.js递归组件构建一个可折叠的树形菜单
- 七周七种前端框架四：Vue.js 组件和组件通信
- SharePoint 2013 树形导航菜单，读取指定文档库下的文件夹和文件（非JS部分）
- 转： Vue.js——60分钟组件快速入门（上篇）
- Vue.js 组件笔记
- Vue.js学习 Item11 – 组件与组件间的通信
- Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
- Vuejs——（８）Vuejs组件的定义