x-tree-select

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="../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> 

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:

$(".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> 

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:

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