https://mbraak.github.io/jqTree/

Tree widget for jQuery
https://mbraak.github.io/jqTree/

javascript jqtree jquery tree tree-widget typescript

Last synced: about 2 months ago
JSON representation

Tree widget for jQuery

• Host: GitHub
• URL: https://mbraak.github.io/jqTree/
• Owner: mbraak
• License: apache-2.0
• Created: 2011-05-09T17:28:22.000Z (over 13 years ago)
• Default Branch: dev
• Last Pushed: 2024-04-07T07:55:53.000Z (5 months ago)
• Last Synced: 2024-04-19T05:44:50.894Z (5 months ago)
• Topics: javascript, jqtree, jquery, tree, tree-widget, typescript
• Language: TypeScript
• Homepage: https://mbraak.github.io/jqTree/
• Size: 17.2 MB
• Stars: 1,023
• Watchers: 50
• Forks: 178
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-json - jqTree - Widget for displaying a tree structure in html. (jQuery) (Frontend components)

README

        
![Build](https://github.com/mbraak/jqTree/workflows/Continuous%20integration/badge.svg) [![codecov](https://codecov.io/gh/mbraak/jqTree/branch/dev/graph/badge.svg?token=DKzjY5YUlq)](https://codecov.io/gh/mbraak/jqTree)

[![NPM version](https://img.shields.io/npm/v/jqtree.svg)](https://www.npmjs.com/package/jqtree)

# jqTree

JqTree is a tree widget. Read more in the [documentation](https://mbraak.github.io/jqTree/).

![screenshot](https://raw.github.com/mbraak/jqTree/master/screenshot.png)

## Features

-   Create a tree from JSON data

-   Drag and drop

-   Works on all modern browsers

-   Written in Typescript

The project is hosted on [github](https://github.com/mbraak/jqTree), has a [test suite](http://mbraak.github.io/jqTree/test/test.html).

## Examples

Example with ajax data:

```html



```


```js

$("#tree1").tree();

```

Example with static data:

```js

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.