Tree Select jQuery plugin http://4xmen.ir
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
A1Gard b1e1f453a7
Merge pull request #11 from 4xmen/dependabot/npm_and_yarn/grunt-1.3.0
1 month ago
demo add search input & property to plugin 2 years ago
dist make mini file 1 year ago
module make comptiable for webpack 2 years ago
src Merge branch 'master' into master 1 year ago
.gitignore change trs to xts 2 years ago
Gruntfile.js inc version 2 years ago
LICENSE ukwnon change / rename dist dir to src 2 years ago
README.md add search input & property to plugin 2 years ago
bower.json rename for npm 2 years ago
package-lock.json Bump grunt from 0.4.5 to 1.3.0 1 month ago
package.json Bump grunt from 0.4.5 to 1.3.0 1 month ago

README.md

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/