项目中用到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中Field.Index,Field.Store的一些设置

    lucene在doc.add(new Field("content",curArt.getContent(),Field.Store.NO,Field.Index.TOKENIZE ...

  2. JSP 基础

    定义 JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相 ...

  3. CentOS6.5 安装snort

    本机CentOS6.5最大化安装,以下安装所需组件也是最大化安装之后仍需自己安装的. 1.安装libpcap与libpcap-devel yum -y install libpcap* 2.安装lib ...

  4. ListView遍历每个Item出现NullPointerException的异常处理(转)

    在使用ListView过程中我们有时候需要遍历取得每个Item项中的一些数据(比如每个Item里面有TextView,需要获取它的文本等等),但是我们在遍历过程中经常会遇到NullPointerExc ...

  5. ExtJS的4.1新特性简要介绍

    ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...

  6. 基于I2C EPPRPM（AT24C02B） + LCD12864实验

    本次实验目的:在指定的EPPROM地址中,写入一数据,延时100MS后,在从该地址中读取,并在LCD上显示. 该实验在前两天就开始做了,一开始并没有成功,读出的一直0x00,当时也调了一会,但跳回到P ...

  7. TCP四次挥手

    TCP 四次挥手      TCP的连接的拆除需要发送四个包,因此称为四次挥手(four-way handshake).客户端或服务器均可主动发起挥手动作,在socket编程中,任何一方执行close ...

  8. UESTC 771 最大容积（前缀后缀和）

    题目链接:http://acm.uestc.edu.cn/#/problem/show/771 最大容积 Time Limit: 3000/1000MS (Java/Others)     Memor ...

  9. 请教<context:component-scan/>和<mvc:annotation-driven/>的区别20

    http://www.iteye.com/problems/66133 FileSystemXmlApplicationContext

  10. HDU 2121 Ice_cream’s world II 最小树形图 模板

    开始学习最小树形图,模板题. Ice_cream’s world II Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...