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:

  • <link rel="stylesheet" href="https://github.com/4xmen/x-tree-select/blob/master/./dist/x-tree-select.css">

• Include js file:

  • <script src="https://github.com/4xmen/x-tree-select/raw/master/./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: []
                  }
              ]
          },
      ]
  });

## how use in webpack
+ 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:
```javascript
$(".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>

## 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:

 $("#tree-select").treeSelect({
     onClose: function(){
         alert('closed');
     }
 });

onSelect

Triggered when selecting select input sample:

 $("#tree-select").treeSelect({
     onSelect: function(selected){
         console.log(selected);
     }
 });

onChange

Triggered when change select input value sample:

 $("#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/