精华内容
下载资源
问答
  • jsTree操作 jsTree插件简介 Web开发使用jsTree实例
  • jquery.tree.js树形导航菜单插件
  • BehaviorTree.js 行为树JavaScript实现。 它们对于实现AI很有用。 如果您需要有关行为树的更多信息,请查看 , 不错的。 产品特点 需要的:序列,选择器,任务 扩展:装饰器 安装 如果使用npm: npm install ...
  • js树状折叠插件,主要实现树状结构的展示效果,附加搜索功能.如下图demo效果,样式可以自定义。 npm install --save js-tree-search 如何使用 let jsTree = new JsTree($('#container')); let data = [ { "id": 9, ...
  • 主要介绍了jQuery树形插件jquery.simpleTree.js用法,结合实例形式分析了jQuery树形菜单插件jquery.simpleTree.js的功能与基本用法,需要的朋友可以参考下
  • 强大的动态树插件与jQuery - jsTree

    千次阅读 2018-08-24 13:51:10
    jsTree是一个功能强大的jQuery插件,用于生成动态的交互式树视图(例如文件夹树),支持内联编辑,拖放,复选框,键盘导航等。 >>>演示 >>>下载 更多功能: 支持HTML...

    jsTree是一个功能强大的jQuery插件,用于生成动态的交互式树视图(例如文件夹树),支持内联编辑,拖放,复选框,键盘导航等。

    >>>演示    >>>下载

    更多功能:

    • 支持HTML和JSON数据。
    • 启用AJAX。
    • 自定义节点图标。
    • 延迟加载。
    • 回调函数。
    • 可搜索和可过滤。

    基本用法:

     1.安装和下载。

    # NPM
    $ npm install jstree --save

    2.在文档中导入您选择的主题CSS。

    <link rel="stylesheet" href="themes/default/style.min.css">
    <link rel="stylesheet" href="themes/default-dark/style.min.css">

    3.将jQuery库和jsTree插件的脚本导入到文档中。

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" 
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
            crossorigin="anonymous"></script>
    <script src="jstree.min.js"></script>

    4.从HTML数据生成树结构。

    <div id="html" class="demo">
      <ul>
        <li data-jstree='{ "opened" : true }'>Root node
          <ul>
            <li data-jstree='{ "selected" : true }'>Child node 1</li>
            <li>Child node 2</li>
          </ul>
        </li>
      </ul>
    </div>

    5.从内联数据生成树结构。

    <div id="data" class="demo"></div>

    6.通过AJAX从外部JSON文件生成树结构。

    $('#ajax').jstree({
      'core' : {
        'data' : {
          "url" : "./root.json",
          "dataType" : "json" // needed only if you do not supply JSON headers
        }
      }
    });

    7.所有默认配置选项。

    /**
     * data configuration
     *
     * If left as `false` the HTML inside the jstree container element is used to populate the tree (that should be an unordered list with list items).
     *
     * You can also pass in a HTML string or a JSON array here.
     *
     * It is possible to pass in a standard jQuery-like AJAX config and jstree will automatically determine if the response is JSON or HTML and use that to populate the tree.
     * In addition to the standard jQuery ajax options here you can suppy functions for `data` and `url`, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used.
     *
     * The last option is to specify a function, that function will receive the node being loaded as argument and a second param which is a function which should be called with the result.
     *
     * __Examples__
     *
     *  // AJAX
     *  $('#tree').jstree({
     *    'core' : {
     *      'data' : {
     *        'url' : '/get/children/',
     *        'data' : function (node) {
     *          return { 'id' : node.id };
     *        }
     *      }
     *    });
     *
     *  // direct data
     *  $('#tree').jstree({
     *    'core' : {
     *      'data' : [
     *        'Simple root node',
     *        {
     *          'id' : 'node_2',
     *          'text' : 'Root node with options',
     *          'state' : { 'opened' : true, 'selected' : true },
     *          'children' : [ { 'text' : 'Child 1' }, 'Child 2']
     *        }
     *      ]
     *    }
     *  });
     *
     *  // function
     *  $('#tree').jstree({
     *    'core' : {
     *      'data' : function (obj, callback) {
     *        callback.call(this, ['Root 1', 'Root 2']);
     *      }
     *    });
     *
     * @name $.jstree.defaults.core.data
     */
    data      : false,
    
    /**
     * configure the various strings used throughout the tree
     *
     * You can use an object where the key is the string you need to replace and the value is your replacement.
     * Another option is to specify a function which will be called with an argument of the needed string and should return the replacement.
     * If left as `false` no replacement is made.
     *
     * __Examples__
     *
     *  $('#tree').jstree({
     *    'core' : {
     *      'strings' : {
     *        'Loading ...' : 'Please wait ...'
     *      }
     *    }
     *  });
     *
     * @name $.jstree.defaults.core.strings
     */
    strings     : false,
    
    /**
     * determines what happens when a user tries to modify the structure of the tree
     * If left as `false` all operations like create, rename, delete, move or copy are prevented.
     * You can set this to `true` to allow all interactions or use a function to have better control.
     *
     * __Examples__
     *
     *  $('#tree').jstree({
     *    'core' : {
     *      'check_callback' : function (operation, node, node_parent, node_position, more) {
     *        // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'
     *        // in case of 'rename_node' node_position is filled with the new node name
     *        return operation === 'rename_node' ? true : false;
     *      }
     *    }
     *  });
     *
     * @name $.jstree.defaults.core.check_callback
     */
    check_callback  : false,
    
    /**
     * a callback called with a single object parameter in the instance's scope when something goes wrong (operation prevented, ajax failed, etc)
     * @name $.jstree.defaults.core.error
     */
    error     : $.noop,
    
    /**
     * the open / close animation duration in milliseconds - set this to `false` to disable the animation (default is `200`)
     * @name $.jstree.defaults.core.animation
     */
    animation   : 200,
    
    /**
     * a boolean indicating if multiple nodes can be selected
     * @name $.jstree.defaults.core.multiple
     */
    multiple    : true,
    
    /**
     * theme configuration object
     * @name $.jstree.defaults.core.themes
     */
    themes      : {
      /**
       * the name of the theme to use (if left as `false` the default theme is used)
       * @name $.jstree.defaults.core.themes.name
       */
      name      : false,
    
      /**
       * the URL of the theme's CSS file, leave this as `false` if you have manually included the theme CSS (recommended). You can set this to `true` too which will try to autoload the theme.
       * @name $.jstree.defaults.core.themes.url
       */
      url       : false,
    
      /**
       * the location of all jstree themes - only used if `url` is set to `true`
       * @name $.jstree.defaults.core.themes.dir
       */
      dir       : false,
    
      /**
       * a boolean indicating if connecting dots are shown
       * @name $.jstree.defaults.core.themes.dots
       */
      dots      : true,
    
      /**
       * a boolean indicating if node icons are shown
       * @name $.jstree.defaults.core.themes.icons
       */
      icons     : true,
    
      /**
       * a boolean indicating if node ellipsis should be shown - this only works with a fixed with on the container
       * @name $.jstree.defaults.core.themes.ellipsis
       */
      ellipsis    : false,
    
    
      /**
       * a boolean indicating if the tree background is striped
       * @name $.jstree.defaults.core.themes.stripes
       */
      stripes     : false,
    
      /**
       * a string (or boolean `false`) specifying the theme variant to use (if the theme supports variants)
       * @name $.jstree.defaults.core.themes.variant
       */
      variant     : false,
    
      /**
       * a boolean specifying if a reponsive version of the theme should kick in on smaller screens (if the theme supports it). Defaults to `false`.
       * @name $.jstree.defaults.core.themes.responsive
       */
      responsive    : false
    },
    
    /**
     * if left as `true` all parents of all selected nodes will be opened once the tree loads (so that all selected nodes are visible to the user)
     * @name $.jstree.defaults.core.expand_selected_onload
     */
    expand_selected_onload : true,
    
    /**
     * if left as `true` web workers will be used to parse incoming JSON data where possible, so that the UI will not be blocked by large requests. Workers are however about 30% slower. Defaults to `true`
     * @name $.jstree.defaults.core.worker
     */
    worker : true,
    
    /**
     * Force node text to plain text (and escape HTML). Defaults to `false`
     * @name $.jstree.defaults.core.force_text
     */
    force_text : false,
    
    /**
     * Should the node should be toggled if the text is double clicked . Defaults to `true`
     * @name $.jstree.defaults.core.dblclick_toggle
     */
    dblclick_toggle : true,
    
    /**
     * Should the loaded nodes be part of the state. Defaults to `false`
     * @name $.jstree.defaults.core.loaded_state
     */
    loaded_state : false,
    
    /**
     * Should the last active node be focused when the tree container is blurred and the focused again. This helps working with screen readers. Defaults to `true`
     * @name $.jstree.defaults.core.restore_focus
     */
    restore_focus : true,
    
    /**
     * Default keyboard shortcuts (an object where each key is the button name or combo - like 'enter', 'ctrl-space', 'p', etc and the value is the function to execute in the instance's scope)
     * @name $.jstree.defaults.core.keyboard
     */
    keyboard : {
      'ctrl-space': function (e) {
        // aria defines space only with Ctrl
        e.type = "click";
        $(e.currentTarget).trigger(e);
      },
    
      'enter': function (e) {
        // enter
        e.type = "click";
        $(e.currentTarget).trigger(e);
      },
    
      'left': function (e) {
        // left
        e.preventDefault();
        if(this.is_open(e.currentTarget)) {
          this.close_node(e.currentTarget);
        }
        else {
          var o = this.get_parent(e.currentTarget);
          if(o && o.id !== $.jstree.root) { this.get_node(o, true).children('.jstree-anchor').focus(); }
        }
      },
    
      'up': function (e) {
        // up
        e.preventDefault();
        var o = this.get_prev_dom(e.currentTarget);
        if(o && o.length) { o.children('.jstree-anchor').focus(); }
      },
    
      'right': function (e) {
        // right
        e.preventDefault();
        if(this.is_closed(e.currentTarget)) {
          this.open_node(e.currentTarget, function (o) { this.get_node(o, true).children('.jstree-anchor').focus(); });
        }
        else if (this.is_open(e.currentTarget)) {
          var o = this.get_node(e.currentTarget, true).children('.jstree-children')[0];
          if(o) { $(this._firstChild(o)).children('.jstree-anchor').focus(); }
        }
      },
    
      'down': function (e) {
        // down
        e.preventDefault();
        var o = this.get_next_dom(e.currentTarget);
        if(o && o.length) { o.children('.jstree-anchor').focus(); }
      },
    
      '*': function (e) {
        // aria defines * on numpad as open_all - not very common
        this.open_all();
      },
    
      'home': function (e) {
        // home
        e.preventDefault();
        var o = this._firstChild(this.get_container_ul()[0]);
        if(o) { $(o).children('.jstree-anchor').filter(':visible').focus(); }
      },
    
      'end': function (e) {
        // end
        e.preventDefault();
        this.element.find('.jstree-anchor').filter(':visible').last().focus();
      },
      
      'f2': function (e) {
        // f2 - safe to include - if check_callback is false it will fail
        e.preventDefault();
        this.edit(e.currentTarget);
      }
    }

    更新日志:

    2018年7月8日

    • v3.3.5:改进了html5 drags

    2018年1月9日

    • 固定边缘情况,上下文菜单出现在错误的位置
    展开全文
  • 树形插件jsTree

    2021-07-02 12:52:10
    jsTree是一款基于jQuery的树形控件,具有扩展性强,可编辑和可配置的特性,支持HTML,JSON...jsTree的皮肤可以自由定制,本文使用的是一款第三方jsTree皮肤。引入依赖因为其基于jQuery,所以引入jsTree依赖前得先引...

    jsTree是一款基于jQuery的树形控件,具有扩展性强,可编辑和可配置的特性,支持HTML,JSON和Ajax数据加载。jsTree官网地址:https://www.jstree.com/。这里主要介绍的是基于Ajax从数据库获取数据,然后生成树形菜单的用法。jsTree的皮肤可以自由定制,本文使用的是一款第三方jsTree皮肤。

    引入依赖

    因为其基于jQuery,所以引入jsTree依赖前得先引入jQuery:1

    2

    3

    4

    由于第三方皮肤没有CDN地址,所以我们下载到本地后手动引入(可在文末得源码中获取):1

    皮肤预览:

    eb59cbc0e9da0f7feade1ee467323108.png

    数据准备

    本文用到的数据表:1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22-- ----------------------------

    -- Table structure for T_DEPT

    -- ----------------------------

    DROP TABLE "MRBIRD"."T_DEPT";

    CREATE TABLE "MRBIRD"."T_DEPT" (

    "DEPT_ID" NUMBER NOT NULL ,

    "PARENT_ID" NUMBER NOT NULL ,

    "DEPT_NAME" VARCHAR2(100 BYTE) NOT NULL ,

    "ORDER_NUM" NUMBER NULL ,

    "CREATE_TIME" DATE NULL

    );

    -- ----------------------------

    -- Records of T_DEPT

    -- ----------------------------

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('1', '0', '开发部', null, TO_DATE('2018-01-04 15:42:26', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('3', '1', '开发二部', null, TO_DATE('2018-01-04 15:42:29', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('5', '0', '人事部', null, TO_DATE('2018-01-04 15:42:32', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('2', '1', '开发一部', null, TO_DATE('2018-01-04 15:42:34', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('4', '0', '市场部', null, TO_DATE('2018-01-04 15:42:36', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('6', '0', '测试部', null, TO_DATE('2018-01-04 15:42:38', 'YYYY-MM-DD HH24:MI:SS'));

    INSERT INTO "MRBIRD"."T_DEPT" VALUES ('7', '2', '一部分部', null, TO_DATE('2018-03-16 10:46:31', 'YYYY-MM-DD HH24:MI:SS'));

    后端框架为Spring Boot + Mybatis(通用mapper),由于本文的重点是jsTree的使用,所以获取数据的细节和数据格式的处理这里不做阐述,具体可参考文末的源码。最终通过Ajax获取到的JSON数据如下所示:1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102{

    "code": 0,

    "msg": {

    "id": "0",

    "icon": null,

    "url": null,

    "text": "根节点",

    "state": {

    "opened": true

    },

    "checked": true,

    "attributes": null,

    "children": [{

    "id": "1",

    "icon": null,

    "url": null,

    "text": "开发部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [{

    "id": "3",

    "icon": null,

    "url": null,

    "text": "开发二部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [],

    "parentId": "1",

    "hasParent": true,

    "hasChildren": false

    }, {

    "id": "2",

    "icon": null,

    "url": null,

    "text": "开发一部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [{

    "id": "7",

    "icon": null,

    "url": null,

    "text": "一部分部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [],

    "parentId": "2",

    "hasParent": true,

    "hasChildren": false

    }],

    "parentId": "1",

    "hasParent": true,

    "hasChildren": true

    }],

    "parentId": "0",

    "hasParent": false,

    "hasChildren": true

    }, {

    "id": "5",

    "icon": null,

    "url": null,

    "text": "人事部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [],

    "parentId": "0",

    "hasParent": false,

    "hasChildren": false

    }, {

    "id": "4",

    "icon": null,

    "url": null,

    "text": "市场部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [],

    "parentId": "0",

    "hasParent": false,

    "hasChildren": false

    }, {

    "id": "6",

    "icon": null,

    "url": null,

    "text": "测试部",

    "state": null,

    "checked": false,

    "attributes": null,

    "children": [],

    "parentId": "0",

    "hasParent": false,

    "hasChildren": false

    }],

    "parentId": "",

    "hasParent": false,

    "hasChildren": true

    }

    }

    基本使用方法

    使用Ajax从后台获取到如上所示格式的JSON数据(也就是r.msg),然后使用jsTree生成树形控件:

    HTML:1

    JavaScript:1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    var ctx = [[@{/}]];

    $(function(){

    createDeptTree();

    });

    function createDeptTree(){

    $.post(ctx + "dept/tree", {}, function(r){

    var data = r.msg;

    $('#deptTree').jstree({

    "core": {

    'data': data.children

    }

    });

    })

    }

    效果如下所示:

    常用操作

    上面介绍了最基本的jsTree使用方法,下面开始介绍一些常用的jsTree操作。

    显示Checkbox

    JavaScript代码如下所示:1

    2

    3

    4

    5

    6$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ]

    });

    显示效果如下:

    此时,被选中的选项默认会有浅蓝色的背景,如果想要去除,只需将js代码改为:1

    2

    3

    4

    5

    6

    7

    8

    9$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ],

    "checkbox" : {

    "keep_selected_style" : false

    }

    });效果如下所示:

    Wholerow插件

    该插件可以给选中的项目或者hover的项目添加一个行级别的背景色,js代码如下所示:1

    2

    3

    4

    5

    6$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox", "wholerow" ]

    });

    效果如下所示:

    添加该插件后,控件前的虚线没了,具体原因未知=。=

    取消父子关联

    默认情况下,选中父节点后,其下的所有子节点也会跟着被选中,取消父子节点关联只需添加"checkbox": {"three_state": false}即可:1

    2

    3

    4

    5

    6

    7

    8

    9$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ],

    "checkbox": {

    "three_state": false // 取消选择父节点后选中所有子节点

    },

    });

    效果如下所示:

    设置单选

    设置单选的前提是必须先取消父子关联,然后在core里添加:1

    2

    3

    4

    5

    6

    7

    8

    9

    10$('#deptTree').jstree({

    "core": {

    'data': data.children,

    'multiple': false // 取消多选

    },

    "plugins" : [ "checkbox" ],

    "checkbox": {

    "three_state": false // 取消选择父节点后选中所有子节点

    },

    });

    效果如下所示:

    全部展开

    如果需要初始化控件的时候展开树,可调用jsTree的open_all()方法:1

    2

    3

    4

    5

    6

    7

    8$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ]

    }).on("loaded.jstree", function (event, data){

    $('#deptTree').jstree().open_all();

    });

    或者设置state:1

    2

    3

    4

    5

    6

    7

    8

    9$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox", "state" ],

    'state': {

    "opened": true,

    }

    });

    效果如下所示:

    默认选中

    jsTree可以在初始化后默认选中某些节点:1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ],

    "checkbox": {

    "three_state": false

    },

    }).on("loaded.jstree", function (event, data){

    $('#deptTree').jstree().open_all();

    $('#deptTree').jstree('select_node', [5, 7], true);

    console.log($('#deptTree').jstree(true).get_selected()); // ["5", "7"]

    });

    效果如下所示:

    绑定选取监听

    jsTree可以在选中和取消选中的时候绑定监听事件:1

    2

    3

    4

    5

    6

    7

    8

    9$('#deptTree').jstree({

    "core": {

    'data': data.children

    },

    "plugins" : [ "checkbox" ]

    }).on("changed.jstree", function (e, data){

    console.log(data.changed.selected); // newly selected

    console.log(data.changed.deselected); // newly deselected

    });

    效果如下所示:

    附录

    其他方法和属性可参考官方文档(官方文档写的比较抽象=。=):https://www.jstree.com/api/。

    展开全文
  • 带复选框tree树结构插件MultipleTreeSelect.js
  • jQuery树插件演示族谱Family tree和日程安排
  • demo以及源码 博文链接:https://lanrenjun.iteye.com/blog/824985
  • ember-cli-jstree 将功能引入您的Ember应用程序。 演示: : 安装 可以通过ember install Ember CLI插件 ember install ember-cli-jstree 用法 开箱即用,模板上需要的最低要求是data 。 通过使用actionReceiver...
  • jsTree 树状菜单插件

    2010-06-17 14:23:11
    JSTree 大型树形菜单控件(基于jQuery),应用当然就非常广泛了,有采用XML的,有使用动态的. 本文档包含有近50种实例,是jsTree快速上手的最佳参考文档。
  • 树结构的选择器插件orgTree.js是一款适用于企业办公系统部分成员管理选择添加修改。
  • 本文为大家分享了jsTree事件和交互以及插件plugins,供大家参考,具体内容如下 1、事件 jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree Event ...
  • jstree插件包和DMEO

    2010-09-12 23:02:13
    jstree插件包和DMEO jstree插件包和DMEO jstree插件包和DMEO jstree插件包和DMEO jstree插件包和DMEO jstree插件包和DMEO
  • jstree-实用的jQuery目录树插件
  • js自定义tree插件 话不多说,先上地址,git地址:https://gitee.com/qimui/tree/releases/1.0.0.0 连接内附带插件的说明。目前自测没有多少问题。希望有知道的小伙伴能帮我指出不足,我们一起改进

    原生js编写的tree插件

    话不多说,先上地址,git地址:https://gitee.com/qimui/tree/releases/v1.0.0.0-20210310
    链接内附带插件的说明。目前自测没有问题。希望有知道的小伙伴能帮我指出不足,我们将该插件做的更好,也希望各位小伙伴提出自己宝贵的意见。
    注释比较少,有耐心的小伙伴可以多看看。内部已经有压缩好的js文件
    亲测10万条数据加载,只需一个配置,即可3秒内加载完成

    展开全文
  • 由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行。今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图。这些都是轻量级的,灵活的jQuery插件,它将一... jsTree 是一个基于Javascript,支持
  • jstree的CDNJS地址的相关链接:(1):js(2):cssjstree的简单使用1:引入css2:引入js3:html内容:父节点1子节点1子节点2父节点2子节点3子节点44:使用jstree$(function () {$('#jstree').jstree({});});如上就可以...

    jstree的CDNJS地址的相关链接:

    (1):js

    (2):css

    jstree的简单使用

    1:引入css

    2:引入js

    3:html内容:

    • 父节点1
      • 子节点1
      • 子节点2
    • 父节点2
      • 子节点3
      • 子节点4

    4:使用jstree

    $(function () {

    $('#jstree').jstree({});

    });

    如上就可以实现树形结构,如下:

    1460000022687505

    上面已经简单的了解了jstree的使用,当我们的树形结构数据来源接口时,实现如下:

    1:html内容:

    2:使用jstree

    $('#jstree').jstree({

    "core" : {

    "check_callback" : true,

    "data": function (obj, cb) {

    $.getJSON("/jstree/tree.php", function (json) {

    if (json.type == 'success') {

    cb.call(this, json.data);

    }

    });

    }

    },

    });

    3:后端(php):

    $data = [

    [

    'id' => 0,

    'parent' => '#',

    'text' => '父级',

    'state' => ['opened' => 'true'],

    'a_attr' => [

    'title' => ' 父级',

    'class' => 'data-table-load',

    'data-url' =>'/user/index',

    ]

    ],

    [

    'id' => 1,

    'parent' => 0,

    'text' => '子级',

    'state' => ['opened' => 'true'],

    'a_attr' => [

    'title' => '子级',

    'class' => 'data-table-load',

    'data-url' => ''/user/index?id=1',

    ]

    ]

    ];

    return ['type' => 'success', 'data' => $data];

    根据如上就可以实现从接口获取数据实现树形结构

    1460000022687506

    展开全文
  • jstree插件对树操作增删改查的使用

    千次阅读 2018-01-25 22:49:56
    jstree官方地址:https://www.jstree.com bootstrap官方地址:https://v3.bootcss.com font-awesome官方地址:http://www.fontawesome.com.cn/faicons/ github项目地址:...
  • JsTree 最详细教程及完整实例

    千次阅读 2016-12-16 16:42:57
    JsTree是一个jquery的插件,它提交一个非常友好并且强大的交互性的树,并且是完全免费或开源的(MIT 许可)。Jstree技持Html 或 json格式的的数据, 或者是ajax方式的动态请求加载数据。 1、支持基于HTML定义、Json...
  • 树形js插件tree.js

    2013-01-07 14:10:42
    最好用的树形插件,兼容性强,扩展性强!是个很好的树形js插件……
  • 本文给大家介绍基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
  • jstree是一款非常实用的jQuery目录树插件jsTree插件易于扩展,可以配置主题,支持HTML和JSON格式的数据,还支持异步回调数据,支持多级树结构等。
  • VSCode插件之 CSS Tree

    千次阅读 2020-06-29 18:18:57
    CSS Tree 功能介绍: 将Html 文档结构直接生成对应 css, sass, less 组织结构 使用方法: 安装 css tree 插件 选中对应的html文档结构 ctrl+shift+p Generate css tree
  • jsTree插件

    2021-03-06 15:04:49
    前言关于树的数据展示,前后用过两个插件,一是zTree,二是jsTree,无论是提供的例子(可下载),还是提供的API在查找时的便捷程度,zTree比jsTree强多了,也很容易上手,所以这里只讲下jsTree的使用本文的例是在vue中...
  • jsTree 事件和交互以及插件(plugins)

    万次阅读 2017-07-18 10:29:15
    1、事件 jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree%20Event 通过data参数获取更多详细信息关于事件检查。...$('#jstree') // listen for e
  • jsTree插件学习

    2017-12-16 20:25:36
    jsTree 使用了 jQuery 和 Sarissa,是一个是免费的但是设置灵活的,基于 JavaScript 跨浏览器支持的网页树形部件。  jsTree 支持三种数据源头:  预先定义好的 HTML -嵌套的列表结构  JSON  XML  js...
  • vue-jstree是一个用于Vue2.0 的树形插件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,461
精华内容 10,984
关键字:

tree插件js