Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | # jstree |
| 2 | |||
| 3 | [jsTree][jstree] is a tree view for jQuery (depends on 1.9.1 or later). |
||
| 4 | It is absolutely free (MIT licence) and supports all modern browsers and IE from version 8 up. |
||
| 5 | jsTree can display trees by parsing HTML or JSON and supports AJAX, it is themeable and easy to configure and customize. Events are fired when the user interacts with the tree. Other notable features are inline editing, drag'n'drop support, fuzzy searching (with optional server side calls), tri-state checkbox support, configurable node types, AMD compatibility, easily extendable via plugins. |
||
| 6 | [jstree]: http://www.jstree.com/ |
||
| 7 | |||
| 8 | ## Getting Started |
||
| 9 | |||
| 10 | Download or checkout the latest copy and include the scripts and styles in your web page. Then create an instance (in this case using the inline HTML). |
||
| 11 | |||
| 12 | ```html |
||
| 13 | <link rel="stylesheet" href="dist/themes/default/style.min.css" /> |
||
| 14 | <script src="dist/libs/jquery.js"></script> |
||
| 15 | <script src="dist/jstree.min.js"></script> |
||
| 16 | <script> |
||
| 17 | $(function() { |
||
| 18 | $('#container').jstree(/* optional config object here */); |
||
| 19 | }); |
||
| 20 | </script> |
||
| 21 | <div id="container"> |
||
| 22 | <ul> |
||
| 23 | <li>Root node |
||
| 24 | <ul> |
||
| 25 | <li id="child_node">Child node</li> |
||
| 26 | </ul> |
||
| 27 | </li> |
||
| 28 | </ul> |
||
| 29 | </div> |
||
| 30 | ``` |
||
| 31 | |||
| 32 | Listen for changes on the tree using events: |
||
| 33 | |||
| 34 | ```html |
||
| 35 | <script> |
||
| 36 | $(function () { |
||
| 37 | $('#container').on('changed.jstree', function (e, data) { |
||
| 38 | console.log(data.selected); |
||
| 39 | }); |
||
| 40 | }); |
||
| 41 | </script> |
||
| 42 | ``` |
||
| 43 | |||
| 44 | And interact with the tree: |
||
| 45 | |||
| 46 | ```html |
||
| 47 | <script> |
||
| 48 | $(function () { |
||
| 49 | $('#container').jstree(true).select_node('child_node'); |
||
| 50 | }); |
||
| 51 | </script> |
||
| 52 | ``` |
||
| 53 | |||
| 54 | For a complete list of configuration options, events and available functions refer to the [documentation][docs] and [demos][demo]. |
||
| 55 | [docs]: http://jstree.com/docs |
||
| 56 | [demo]: http://jstree.com/demo |
||
| 57 | |||
| 58 | ## Contributing |
||
| 59 | In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](https://github.com/gruntjs/grunt). |
||
| 60 | |||
| 61 | _Please do NOT edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!_ |
||
| 62 | |||
| 63 | If you want to you can always [donate a small amount][paypal] to help the development of jstree. |
||
| 64 | [paypal]: https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com¤cy_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree |
||
| 65 | |||
| 66 | ## License |
||
| 67 | Copyright (c) 2014 Ivan Bozhanov (http://vakata.com) |
||
| 68 | |||
| 69 | Licensed under the [MIT license][mit]. |
||
| 70 | [mit]: http://www.opensource.org/licenses/mit-license.php |