https://github.com/4xmen/x-tree-select
Tree Select jQuery plugin
https://github.com/4xmen/x-tree-select
javascript rtl-design
Last synced: 12 months ago
JSON representation
Tree Select jQuery plugin
- Host: GitHub
- URL: https://github.com/4xmen/x-tree-select
- Owner: 4xmen
- License: gpl-3.0
- Created: 2019-01-25T01:08:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-22T00:37:33.000Z (about 2 years ago)
- Last Synced: 2025-05-20T14:07:23.616Z (about 1 year ago)
- Topics: javascript, rtl-design
- Language: JavaScript
- Homepage: http://4xmen.ir
- Size: 317 KB
- Stars: 103
- Watchers: 4
- Forks: 27
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jquery Tree Select
Tree select plugin for jquery
## installation
+ npm:
+ `npm i x-tree-select`
+ yarn:
+ `yarn add x-tree-select`
## Usage
+ Include css file:
+ ```html
```
+ Include js file:
+ ```html
```
+ Add to input:
```html
$("#test").treeSelect({
mainTitle: 'x main cat',
datatree: [{
title: 'text1',
value: 1,
child: []
}, {
title: 'text2',
value: 2,
child: []
},
{
title: 'text3',
value: 3,
child: [
{
title: 'lv2 text3',
value: 3,
child: []
},
{
title: 'lv2 text5',
value: 5,
child: []
}
]
},
]
});
```
## how use in webpack
+ import the module:
``import xtreeselec from 'x-tree-select';``
+ add your element:
````
+ initialze the element with js:
```javascript
$(".treeSelect").treeSelect({
datatree: [
// your json here
]
});
```
+ for example in webpack vuejs
```html
import xtreeselec from 'x-tree-select';
export default {
name: "mycompnent",
data: function () {
return {
// ...
}
},
mounted: function () {
$(".treeSelect").treeSelect({
datatree: [
// ...
]
});
}
}
```
## Options
The tree select options you can customize your plugine usagae
| Option | Default | Description |
| ------ | ------ | ------ |
| `direction`| ltr | you can use rtl too for your project|
| `searchable`| false | searchable element |
| `datatree`| []| The data need navigate in tree select watch abow example to how bind this value|
|`mainTitle`| "Main category"| The title of back button to main category list |
|`transition`| "fade"| The change page animation transition effect |
|`json`| `{title: 'title',value: 'value',child: 'child'}`| The json for your data tree key names you can change keys|
| `selectablePrernt`| false | Is the parent selectable |
## events
The event you can use for tree select
### onOpen
Triggered when opening select input
sample:
```javascript
$("#tree-select").treeSelect({
onOpen: function(){
alert('opened');
}
});
```
### onClose
Triggered when closing select input
sample:
```javascript
$("#tree-select").treeSelect({
onClose: function(){
alert('closed');
}
});
```
### onSelect
Triggered when selecting select input
sample:
```javascript
$("#tree-select").treeSelect({
onSelect: function(selected){
console.log(selected);
}
});
```
### onChange
Triggered when change select input value
sample:
```javascript
$("#tree-select").treeSelect({
onChange: function(oldVal,newVal){
console.log(oldVal,newVal);
}
});
```
## Browser compatibility
-  IE >= 9
-  Edge all version
-  Firefox >= 16
-  Safari >=11
- / chrome / chromium >= 26
-  Opera >=15
-  Android browser >= 4.4
- Blackberry Browser >= 10
-  iOS Safari >= 7
## Support
If you found a bug or have a feature suggestion, please submit it in the Issues tracker.
## Demo
See `demo/index.html` for demo.
you can see online demo (example) here:
http://4xmen.ir/github_example/tree-select/demo/