JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Tree widget for jQuery
    Filed under 

    • 🔾47%Overall
    • 1,002
    • 13.8 days
    • 🕩177
    • 👥6

    Build Coverage Status

    NPM version

    jqTree

    JqTree is a tree widget. Read more in the documentation.

    screenshot

    Features

    • Create a tree from JSON data
    • Drag and drop
    • Works on ie11+, firefox, chrome and safari
    • Written in Typescript

    The project is hosted on github, has a test suite.

    Examples

    Example with ajax data:

    <div id="tree1" data-url="/example_data/"></div>
    
    $("#tree1").tree();
    

    Example with static data:

    var data = [
        {
            label: "node1",
            id: 1,
            children: [
                { label: "child1", id: 2 },
                { label: "child2", id: 3 },
            ],
        },
        {
            label: "node2",
            id: 4,
            children: [{ label: "child3", id: 5 }],
        },
    ];
    $("#tree1").tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true,
    });
    

    Documentation

    The documentation is on http://mbraak.github.io/jqTree/.

    Thanks

    The code for the mouse widget is heavily inspired by the mouse widget from jquery ui.

    Show All