Tree Select jQuery plugin http://4xmen.ir
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
A1Gard 3cd7eaccad
Merge pull request #14 from 4xmen/dependabot/npm_and_yarn/grunt-1.5.3
há 2 meses
demo add search input & property to plugin há 3 anos
dist make mini file há 2 anos
module make comptiable for webpack há 3 anos
src Merge branch 'master' into master há 2 anos
.gitignore change trs to xts há 3 anos
Gruntfile.js inc version há 3 anos
LICENSE ukwnon change / rename dist dir to src há 3 anos
README.md add search input & property to plugin há 3 anos
bower.json rename for npm há 3 anos
package-lock.json Bump grunt from 1.5.2 to 1.5.3 há 2 meses
package.json Bump grunt from 0.4.5 to 1.3.0 há 1 ano

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/