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': [
            //……菜单信息
        ]
    }
});    

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