Have ideas to improve npm?Join in the discussion! »

    x-tree-select

    2.1.5 • Public • Published

    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/

    Install

    npm i x-tree-select

    DownloadsWeekly Downloads

    2

    Version

    2.1.5

    License

    GPL-3.0

    Unpacked Size

    159 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar
    • avatar