Tree select plugin for jquery
- npm:
npm i x-tree-select
- yarn:
yarn add x-tree-select
-
Include css file:
-
<link rel="stylesheet" href="../dist/x-tree-select.css">
-
-
Include js file:
-
<script src="../dist/x-tree-select.js"></script>
-
-
Add to input:
<input type="text"
name="test"
id="test"
placeholder="plz select"/>
<script>
$("#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: []
}
]
},
]
});
</script>- import the module:
import xtreeselec from 'x-tree-select';
- add your element:
<input type="text" name="test" class="treeSelect" placeholder="plz select"/>
- initialze the element with js:
$(".treeSelect").treeSelect({
datatree: [
// your json here
]
});- for example in webpack vuejs
<template>
<div>
<input type="text" name="test" class="treeSelect" placeholder="plz select"/>
</div>
</template>
<script>
import xtreeselec from 'x-tree-select';
export default {
name: "mycompnent",
data: function () {
return {
// ...
}
},
mounted: function () {
$(".treeSelect").treeSelect({
datatree: [
// ...
]
});
}
}
</script>
<style scoped>
</style>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 |
The event you can use for tree select
Triggered when opening select input sample:
$("#tree-select").treeSelect({
onOpen: function(){
alert('opened');
}
});Triggered when closing select input sample:
$("#tree-select").treeSelect({
onClose: function(){
alert('closed');
}
});Triggered when selecting select input sample:
$("#tree-select").treeSelect({
onSelect: function(selected){
console.log(selected);
}
});Triggered when change select input value sample:
$("#tree-select").treeSelect({
onChange: function(oldVal,newVal){
console.log(oldVal,newVal);
}
});IE >= 9
Edge all version
Firefox >= 16
Safari >=11
/
chrome / chromium >= 26
Opera >=15
Android browser >= 4.4
- Blackberry Browser >= 10
iOS Safari >= 7
If you found a bug or have a feature suggestion, please submit it in the Issues tracker.
See demo/index.html for demo.
you can see online demo (example) here: