jstree 插件的使用笔记（一）

官方：http://www.jstree.com/

 一、节点的描述

官方资料：http://www.jstree.com/docs/json/

格式一

{

  id          : "string" // 对应节点 html 元素的 id,如果不填写此属性，则会自动生成一个

  text        : "string" // 节点的文本描述

  icon        : "string" // 节点的自定义图标地址

  state       : {

    opened    : boolean  //节点是否是打开状态

    disabled  : boolean  //节点是否是禁用状态

    selected  : boolean  //节点是否是选择状态

  },

  children    : []  //子节点的数组集合。

  li_attr     : {}  // attributes for the generated LI node

  a_attr      : {}  // attributes for the generated A node

}

 

格式二

{

  id          : "string" // 对应节点 html 元素的 id,如果不填写此属性，则会自动生成一个

  parent      : "string" // 父节点的id，如果不存在父节点，可以填写“#”

  text        : "string" // 节点的文本描述

  icon        : "string" // 节点的自定义图标地址

  state       : {

    opened    : boolean  // 节点是否是打开状态

    disabled  : boolean  // 节点是否是禁用状态

    selected  : boolean  // 节点是否是选择状态

  },

  li_attr     : {}  // attributes for the generated LI node

  a_attr      : {}  // attributes for the generated A node

}

 

 

二、基本使用方式

 

格式一

        $('#tree').jstree({

            'core': {

                'data': [

                    {

                        "text": "Root node",

                        "state": { "opened": true },

                        "children": [

                            {

                                "text": "Child node 1",

                                "state": { "selected": true },



                                "children": [

                                {

                                    "text": "Root node 3",

                                    "state": { "selected": true },

                                    "icon": "jstree-file"

                                }]

                            },

                            { "text": "Child node 2", "state": { "disabled": true } }

                        ]

                    }

                ]

            }

        });

 

格式二

$('#tree').jstree({ 'core' : {

    'data' : [

       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },

       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },

       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },

       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },

    ]

} });

 

三、点击事件

下面这个是官方的例子：

$('#jstree')

  // listen for event

  .on('changed.jstree', function (e, data) {

    var i, j, r = [];

    for(i = 0, j = data.selected.length; i < j; i++) {

      r.push(data.instance.get_node(data.selected[i]).text);

    }

    $('#event_result').html('Selected: ' + r.join(', '));

  })

  // create the instance

  .jstree();

当点击菜单时，就会在id是“event_result”的HTML标记上输出选中菜单的名称，支持多选。

下面这个就是自己改成单选的形式。

$('#tree').on('changed.jstree', function (e, data) {

        //获得选中菜单编号。

        alert(data.selected);

    }).jstree({

         'core': {

        'multiple': false,//禁止多选

        'data': [

            //……菜单信息

        ]

    }

});    

当点击菜单时弹出框显示选中菜单的编号。