项目中用到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. acm课程练习2--1013（同1014）

    题目描述 There is a strange lift.The lift can stop can at every floor as you want, and there is a number ...

  2. 河南多校联合训练　F 不是匹配

    描述  有N个人,N个活动, 每个人只会对2个或者3个活动感兴趣,  每个活动也只有两个人或者两个活动对它兴趣,每个人参加一个  感兴趣的活动需要一天 ,且当天该活动被参加时,其他的人不能参加  如果 ...

  3. Ubuntu 9.10+ apache2.2 +Django的配置

    1.首先安装mod_python apt-get install libapache2-mod-python2.6 (Ubuntu 9.10默认安装的是python 2.6版,如果是2.5可改为 li ...

  4. java工程开发之图形化界面之（第一课）

    下面我们先上代码: package 一个事例图形小应用程序; import javax.swing.JApplet; import java.awt.Graphics; public class 绘制 ...

  5. 区间gcd问题 HDU 5869 离线+树状数组

    题目大意:长度n的序列, m个询问区间[L, R], 问区间内的所有子段的不同GCD值有多少种. 子段就是表示是要连续的a[] 思路:固定右端点,预处理出所有的gcd,每次都和i-1的gcd比较,然后 ...

  6. 转:Windows下用sftp自动下载文件

    远程服务器是Linux操作系统,没有ftp服务,可以ssh,数据库每天2:00会自动创建一个备份文件,本地计算机是windows操作系统,希望用sftp每天3:00下载远程服务器上的备份文件.本地系统 ...

  7. Android----paint触摸轨迹监听

    paint触摸轨迹监听,主要是三种而已,ACTION_DOWN,ACTION_MOVE,ACTION_UP public boolean onTouchEvent(MotionEvent event) ...

  8. Asp获取网址相关参数大全

      Asp获取网址相关参数大全 代码一:[获取地址中的文件名,不包含扩展名]<%dim Url,FileName,File Url=split(request.servervariables(& ...

  9. Gson通过借助TypeToken获取泛型参数的类型的方法

    最近在使用Google的Gson包进行Json和Java对象之间的转化,对于包含泛型的类的序列化和反序列化Gson也提供了很好的支持,感觉有点意思,就花时间研究了一下. 由于Java泛型的实现机制,使 ...

  10. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...