项目中用到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. HDOJ--ACMSteps--2.1.8--Leftmost Digit-(取对数,数学)

    Problem Description Given a positive integer N, you should output the leftmost digit of N^N. Input T ...

  2. RMQ 详解

    RMQ(Range Minimum/Maximum Query)问题:RMQ问题是给定一个区间,求这个区间中的最大或最小值的问题 RMQ采用动态规划的思想来求解:(st算法:Square Table) ...

  3. ZOJ Problem - 2588 Burning Bridges tarjan算法求割边

    题意:求无向图的割边. 思路:tarjan算法求割边,访问到一个点,如果这个点的low值比它的dfn值大,它就是割边,直接ans++(之所以可以直接ans++,是因为他与割点不同,每条边只访问了一遍) ...

  4. JS 的NULL undefined 空

    null,对象不存在 var ii= document.getElementById("id"); alert(ii); 当前页面不存在id对象 undefined var i; ...

  5. k-Means和KNN算法简述

    k-means 算法 k-means 算法接受输入量 k :然后将n个数据对象划分为 k个聚类以便使得所获得的聚类满足:同一聚类中的对象相似度较高:而不同聚类中的对象相似度较小.聚类相似度是利用各聚类 ...

  6. 使用log4j无法输出日志

    前段时间在项目的过程中使用log4j来输出日志,但是在一个项目里我明明已经在src/main/resource目录下创建了log4j.properties.具体配置如下: log4j.rootLogg ...

  7. 通过ReconstructMe实现3D扫描

    实物3D建模 目前在3D游戏制作过程中,需要专业人士花几天甚至数星期的时间,借助于Autodesk 3ds Max和Maya等昂贵的软件工具制作3D模型.纹理和动画.游戏制作中经常使用一种方法,即设计 ...

  8. 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛

    3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 243  Solved: 167[S ...

  9. vbs 解析html文档的方法

    vbs 解析html文档的方法(htmlfile) 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2014-06-18我要评论 关于VBS采集,网上流行比较多的方法都是正则,其实 h ...

  10. emacs search, 讲的很清楚。

    默认情况下,Emacs采用了一种很待殊的”增量搜索”的功能,虽然它与我们常用的搜索方法在操作习惯上有很大的不同,但习惯后确实是十分的方便. 要让Emacs开始执行搜索,可以按C-s或C-r,前者是从光 ...