项目中用到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. lucene特殊字符处理

    这是个郁闷的问题,今天遇到了,但在lucene中查询的关键字保护有特殊字符,譬如--,会出现如下异常: org.apache.lucene.queryParser.ParseException: Ca ...

  2. java 文件字符输入、输出流

    Example10_6.java import java.io.*; public class Example10_6 { public static void main(String args[]) ...

  3. CentOS Hadoop安装配置详细

    总体思路,准备主从服务器,配置主服务器可以无密码SSH登录从服务器,解压安装JDK,解压安装Hadoop,配置hdfs.mapreduce等主从关系. 1.环境,3台CentOS7,64位,Hadoo ...

  4. SEO优化之 主页上加上nofollow

    <a href=http://www.主页.cn/ rel=”nofollow”>这里是锚文字</a> <光年日志分析系统>来分析抓取比较多的是哪个网页,没用的no ...

  5. C# Excel嵌入到Winform

    本文讲的这个技术是把Excel表格嵌入到自己开发程序的Form窗体中进行操作,给客户一个不用切换窗口的操作界面,似乎更好.这在VC中用OLE技术很容易实现,但是在C#中方法就不一样啦.下面将就此进行阐 ...

  6. 8、代理模式（Proxy）

    其实每个模式名称就表明了该模式的作用,代理模式就是多一个代理类出来,替原对象进行一些操作,比如我们在租房子的时候回去找中介,为什么呢?因为你对该地区房屋的信息掌握的不够全面,希望找一个更熟悉的人去帮你 ...

  7. android UI中添加一张图片如何将这张图片中某一部分设为透明的

    可以利用canvas画布类,这个类的具体方法可以参看官方api.http://developer.android.com/reference/android/graphics/Canvas.html ...

  8. PhoneGap学习（一）

    1. 配置要求 Eclipse 3.4+ 这里提供一个不需要Eclipse的Terminal版本教程 2. 安装 SDK + PhoneGap 下载安装Eclipse Classic 下载安装 And ...

  9. 破解JS加密：url unicode加密而已

    加密所在的地方:http://tool.chinaz.com/Tools/UrlCrypt.aspx?url=www.baidu.com 结果: http://%77%77%77%2E%62%61%6 ...

  10. ASP.NET MVC---自定义HtmlHelper方法

    HtmlHelper方法是ASP.NET MVC中非常强大的特性,有了这个特性,我们就能更加随心所欲的定制自己的页面. 自定义自己的HtmlHelper方法通常有三种, 像是: 一.Razor语法 采 ...