项目中用到tree结构,使用了jstree做个笔记如下:

1. 官网: http://www.jstree.com/    有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O

[PS: 一些灰常基本的我可能就略过了...]

2. 先看看效果:

(1)去官网下载jstree包,然后引入; 额外的样式文件(font-awesome.css):  到这个网址去下载  然后引入 http://fontawesome.io/license

(2)添加jstree的容器

 <div id="tree1"></div>

(3)初始化jstree (全部代码如下)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <link rel="stylesheet" type="text/css"  href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css"/>

     <link href="font-awesome/font-awesome.css" rel="stylesheet" type="text/css"/>

     <style>

         /* Icon coloring begin*/

         .icon-state-default {

             color: #c6c6c6;

         }

         .icon-state-success {

             color: #45b6af;

         }

         .icon-state-info {

             color: #89c4f4;

         }

         .icon-state-warning {

             color: #ecbc29;

         }

         .icon-state-danger {

             color: #f3565d;

         }

         /* Icon coloring end*/

     </style>

 </head>

 <body>

     <div id="tree1"></div>

 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 <script src="../../assets/global/plugins/jstree/dist/jstree.js"></script>

 <script>

     $(function(){

         //初始化jstree

         $("#tree1").jstree({

             "core": {

                 "themes": {

                     "responsive": false

                 },

                 // so that create works

                 "check_callback": true,

                 //data为后台返回的数据,这里我先伪造一点数据

                 'data': [{

                     "text": "物料",//根节点名称

                     "children": [

                         {

                             "text": "标准件",//节点名称

                             "icon": "fa fa-folder icon-state-danger" //节点样式

                         },

                         {

                             "text": "通用件",

                             "icon": "fa fa-folder icon-state-danger"

                         },

                         {

                             "text": "专用件",

                             "state": {

                                 "opened": true//为true表示打开子节点

                             },

                             "children": [

                                 {

                                     "text": "2 零件",

                                     "icon": "fa fa-folder icon-state-danger"

                                 },

                                 {

                                     "text": "3成品件",

                                     "icon": "fa fa-folder icon-state-danger"

                                 },

                                 {

                                     "text": "...",

                                     "icon": "fa fa-folder icon-state-danger"

                                 }]

                         },

                         {

                             "text": "原材料",

                             "state": {

                                 "opened": true

                             },

                             "children": [

                                 {

                                     "text": "1.1 黑色金属",

                                     "icon": "fa fa-folder icon-state-danger"

                                 },

                                 {

                                     "text": "1.2 有色金属",

                                     "state": {

                                         "selected": true,

                                     },

                                     "icon": "fa fa-folder icon-state-danger"

                                 },

                                 {

                                     "text": "1.3 非金属",

                                     "icon": "fa fa-folder icon-state-danger"

                                 },

                                 {

                                     "text": "...",

                                     "icon": "fa fa-folder icon-state-danger"

                                 }]

                         }]

                 }]

             },

             //types表示文件类型,不同类型设置不同的样式 也就是icon的值

             "types": {

                 "default": {

                     "icon": "fa fa-folder icon-state-warning icon-lg"

                 },

                 "file": {

                     "icon": "fa fa-file icon-state-warning icon-lg"

                 }

             },

             //plugins 要使用的插件,jstree内部集成了一些插件比如 contextmenu:右键菜单

             "plugins": ["contextmenu", "dnd", "state", "types"]

         });

     });

 </script>

 </body>

 </html>

jstree基本

以上为基本操作,最好先去看官网的文档

jstree使用小结(一)的更多相关文章

  1. jstree使用小结(三)

    操作节点的这几个事件都比较简单: 如下 var $tree=$('#tree1'); $tree.jstree({...}); //选中节点 $tree.on('select_node.jstree' ...

  2. jstree使用小结(二)

    继续上一篇: 1.数据 按照官网的json数据返回格式: 有两种格式,我使用的格式如下: $('#jstree1').jstree({ 'core' : { 'data' : [ { "id ...

  3. 从零开始编写自己的C#框架（26）——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  4. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  5. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  6. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  7. iOS 之UITextFiled/UITextView小结

    一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...

  8. K近邻法(KNN)原理小结

    K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...

  9. scikit-learn随机森林调参小结

    在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...

随机推荐

  1. JS中获取页面单选框radio和复选框checkbox中当前选中的值

    单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...

  2. java 基础的几种算法

    1:冒泡排序:2个之间进行循环筛选   public void sort(int[] a) { int temp = 0; for (int i = a.length - 1; i > 0; i ...

  3. Hibernate一级缓存和二级缓存深度比较

    1.什么是缓存 缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据, ...

  4. 转：Selenium2.0介绍——WebDriver两种驱动浏览器的方式.

    如果之前熟悉Selenium RC,理解了Selenium RC是如何工作的,那么,当第一次接触Selenium WebDriver的时候,看到WebDriver居然可以不需要指定远端服务器的IP地址 ...

  5. Image File Execution Options（2）

    跳转转到键值HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Image File Execution Options在里 ...

  6. 滑雪(ski)

    滑雪(ski) 题目描述 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  7. loadView 再思考

    如果使用代码创建view,那么就需要重写loadView方法: 在这个方法中,如果不创建view,就会循环的调用loadView. - (void)loadView { UIView *view = ...

  8. hadoop1.2.1 MultipleOutputs将结果输出到多个文件或文件夹

    hadoop1.2.1 MultipleOutputs将结果输出到多个文件或文件夹 博客分类:http://tydldd.iteye.com/blog/2053867 hadoop   hadoop1 ...

  9. iOS开发——GCDAsyncSocket

    新进的这家公司搞智能家居,就随便整理一下其相关技术吧!首先,从GCDAsyncSocket的使用问题着手. 正如名称一样GCDAsyncSocket开源类库是以苹果的GCD多任务处理机制完成的一个异步 ...

  10. foreach的2个细节!

    人生不应该在同第一个地方摔第三次.... 1. foreach的时候一定要对要遍历的元素进行null判定. 2. foreach中不要对遍历的元素进行增删改操作(问题严重) 还有一个细节: 使用了的流 ...