Tree Select jQuery plugin http://4xmen.ir
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
A1Gard 3cd7eaccad
Merge pull request #14 from 4xmen/dependabot/npm_and_yarn/grunt-1.5.3
2 месяцев назад
demo add search input & property to plugin 3 лет назад
dist make mini file 2 лет назад
module make comptiable for webpack 3 лет назад
src Merge branch 'master' into master 2 лет назад
.gitignore change trs to xts 3 лет назад
Gruntfile.js inc version 3 лет назад
LICENSE ukwnon change / rename dist dir to src 3 лет назад
README.md add search input & property to plugin 3 лет назад
bower.json rename for npm 3 лет назад
package-lock.json Bump grunt from 1.5.2 to 1.5.3 2 месяцев назад
package.json Bump grunt from 0.4.5 to 1.3.0 1 год назад

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/