https://github.com/zewa666/aurelia-jstree
Aurelia wrapper for jsTree
https://github.com/zewa666/aurelia-jstree
aurelia aurelia-plugins jstree
Last synced: 1 day ago
JSON representation
Aurelia wrapper for jsTree
- Host: GitHub
- URL: https://github.com/zewa666/aurelia-jstree
- Owner: zewa666
- License: mit
- Created: 2017-10-22T11:21:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-29T19:56:05.000Z (about 7 years ago)
- Last Synced: 2025-10-12T02:08:01.101Z (1 day ago)
- Topics: aurelia, aurelia-plugins, jstree
- Language: TypeScript
- Size: 145 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aurelia-jstree
An Aurelia wrapper component for [jsTree](https://www.jstree.com/).
## Install
Make sure to npm install jQuery and jsTree alongside this wrapper.
```bash
npm install jquery jstree aurelia-jstree --save
```
## Aurelia CLI Support
If your Aurelia CLI build is based on RequireJS or SystemJS you can setup the plugin using the following dependency declaration:
```json
...
"dependencies": [
{
"name":"jquery",
"path":"../node_modules/jquery/dist",
"main":"jquery.min",
"export": "$"
},
{
"name":"jstree",
"path":"../node_modules/jstree/dist",
"main":"jstree.min"
},
{
"name": "aurelia-jstree",
"path": "../node_modules/aurelia-jstree/dist/amd",
"main": "index"
}
]
```
## Configuration
In your `main.ts` you'll have to load jstree and register the plugin:
```typescript
import {Aurelia} from 'aurelia-framework'
import environment from './environment';
import "jstree"; // <------------ MAKE SURE TO IMPORT JSTREE
import 'jstree/themes/default/style.min.css'; // <----- IMPORT STYLES OR INCLUDE BY ANY OTHER MEANS (SCSS, direct include ...)
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature('resources');
...
aurelia.use.plugin("aurelia-jstree"); // <----- REGISTER THE PLUGIN
aurelia.start().then(() => aurelia.setRoot());
}
```
## Usage
Once the plugin is installed and configured you can use the `au-js-tree` custom component.
An example for a simple filebrowser is provided below:
```html
```
The `settings.core` should not contain the `data` property. It should be provided
separately via the `data binding` to ensure proper re-renders on prop changes.
```typescript
export class App {
public jstreeConfig = {
plugins: ["dnd"],
core: {
check_callback: function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
console.log(operation);
if (operation === "move_node") {
console.group("D&D");
console.log("node", node);
console.log("parent", node_parent);
console.log("position", node_position);
console.log("more", more);
console.log(node_parent.original.isFolder);
console.groupEnd();
return node_parent.original.isFolder === true; //only allow dropping inside folders
}
return true; //allow all other operations
}
},
dnd: {
check_while_dragging: true
}
}
public data = [
{
text: "Root folder",
state: { opened: true },
isFolder: true,
children: [
{
text: "File 1",
state: { selected: true },
icon: "jstree-file"
},
{
text: "File 2",
icon: "jstree-file"
},
{
text: "Subfolder",
state: { opened: false },
icon: "jstree-folder",
children: [],
isFolder: true
}
]
}
];
onSelectionChanged = (e: JQueryEventObject, data: any) => {
console.group("Selection was changed");
console.log(this);
console.log(e);
console.log(data);
console.groupEnd();
}
onNodeMoved = (e: JQueryEventObject, data: JsTreeNodeMovedData) => {
console.group("Node was moved");
console.log(e);
console.log(data);
console.groupEnd();
}
}
```
> When binding a function to either `selection-changed` or `node-moved` instead of a lambda expression, please note that `this` inside your function is going to refer to the element vs your expected class instance. To avoid that bind with a proper context
```html
```
## Acknowledgement
Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin