jqtree使用说明

JqTree is a jQuery widget for displaying a tree structure in html 
It supports json data, loading via ajax and drag-and-drop.

Download jqTree

 参看文档：http://mbraak.github.io/jqTree/

 

//使用js的严格模式
'use strict';

var $tree = $('#menutree');
$(document).ready(function () {
    getSingle("/oa/api/menu/", function (data) {
        data = JSON.parse(data);
        console.log(data);
        $tree.tree({
            //rtl: true,//可以使用rtl选项从右到左显示树。
            //buttonLeft: false,//将切换按钮，放到右侧
    //         onDragMove: function () {
    //             console.log("tuozdaew")   //将菜单拖到树外触发的函数
    //         },
    // onDragStop: function () {
    //                     console.log("11111111111")  //拖动菜单 松开鼠标后触发的函数
    //
    // },
            data: data,
            autoOpen: 0,//true  打开全部节点  设置为0以打开第一级节点。
            dragAndDrop: true, //选项设置为true来添加拖放支持。现在，您可以将树节点拖动到另一个位置。
            saveState: true,//如果将选项saveState设置为true，则jqtree会在页面重新加载后记住树的状态。
            onCreateLi: function (node, $li) {
                $li.find('.jqtree-element').append(
                    '<a href="#node-' + node.id + '" class="edit" data-node-id="' + node.id + '">' +
                    '<i class="fa fa-pencil-square-o"></i>编辑</a>'
                );
            },
            closedIcon: $('<i class="fa fa-arrow-circle-right"></i>'),
            openedIcon: $('<i class="fa fa-arrow-circle-down"></i>')
        });
    });
/*
    $tree.on('tree.click', function (e) {
        // Disable single selection
        e.preventDefault();
        var selected_node = e.node;
        console.log(selected_node);
        if (selected_node.id === undefined) {
            console.warn('警告，每个菜单条目都必须有一个唯一的ID！');
        }

        if ($tree.tree('isNodeSelected', selected_node)) {
            $tree.tree('removeFromSelection', selected_node);//取消选择

        } else {
            $tree.tree('addToSelection', selected_node);//点击选中


        }
    });
*/
// 绑定编辑事件
    $tree.on('click', '.jqtree_common div a.edit', function (e) {
        // Get the id from the 'node-id' data property
        var node_id = $(e.target).data('node-id');
        console.log(node_id);
        // Get the node from the tree
        var node = $tree.tree('getNodeById', node_id);
        console.log(node);

        if (node) {
            // Display the node name
            alert(node.name);
        }
    })


});