Skip to content

4xmen/x-tree-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 IE >= 9
  • edge Edge all version
  • firefox Firefox >= 16
  • safari Safari >=11
  • chrom/chromium chrome / chromium >= 26
  • opera Opera >=15
  • android Android browser >= 4.4
  • Blackberry Browser >= 10
  • ios safari 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/