{"id":19427651,"url":"https://github.com/4xmen/x-tree-select","last_synced_at":"2025-06-22T15:34:24.527Z","repository":{"id":34635038,"uuid":"167462555","full_name":"4xmen/x-tree-select","owner":"4xmen","description":"Tree Select jQuery plugin","archived":false,"fork":false,"pushed_at":"2024-06-22T00:37:33.000Z","size":325,"stargazers_count":103,"open_issues_count":2,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-20T14:07:23.616Z","etag":null,"topics":["javascript","rtl-design"],"latest_commit_sha":null,"homepage":"http://4xmen.ir","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4xmen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-25T01:08:29.000Z","updated_at":"2025-04-04T03:00:34.000Z","dependencies_parsed_at":"2024-06-22T14:23:55.606Z","dependency_job_id":"9365ce46-8aa6-497e-9b0d-8af3b044dae9","html_url":"https://github.com/4xmen/x-tree-select","commit_stats":{"total_commits":97,"total_committers":5,"mean_commits":19.4,"dds":0.134020618556701,"last_synced_commit":"3cd7eaccadf89c486f8763680c983c7287f9e961"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/4xmen/x-tree-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-tree-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-tree-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-tree-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-tree-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4xmen","download_url":"https://codeload.github.com/4xmen/x-tree-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-tree-select/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261314850,"owners_count":23140161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","rtl-design"],"created_at":"2024-11-10T14:12:21.535Z","updated_at":"2025-06-22T15:34:19.513Z","avatar_url":"https://github.com/4xmen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jquery Tree Select\n\nTree select plugin for jquery\n\n## installation\n\n+ npm:\n    + `npm i x-tree-select`\n+ yarn:\n    + `yarn add x-tree-select`\n\n## Usage\n\n+ Include css file:\n    + ```html\n        \u003clink rel=\"stylesheet\" href=\"../dist/x-tree-select.css\"\u003e\n      ```\n\n+ Include js file:\n    + ```html\n        \u003cscript src=\"../dist/x-tree-select.js\"\u003e\u003c/script\u003e\n      ```\n\n+ Add to input:\n```html\n    \u003cinput type=\"text\"\n       name=\"test\"\n       id=\"test\"\n       placeholder=\"plz select\"/\u003e\n    \u003cscript\u003e\n    $(\"#test\").treeSelect({\n        mainTitle: 'x main cat',\n        datatree: [{\n            title: 'text1',\n            value: 1,\n            child: []\n        }, {\n            title: 'text2',\n            value: 2,\n            child: []\n        },\n            {\n                title: 'text3',\n                value: 3,\n                child: [\n                    {\n                        title: 'lv2 text3',\n                        value: 3,\n                        child: []\n                    },\n                    {\n                        title: 'lv2 text5',\n                        value: 5,\n                        child: []\n                    }\n                ]\n            },\n        ]\n    });\n\n\u003c/script\u003e\n```\n\n## how use in webpack\n+ import the module: \n\n``import xtreeselec from 'x-tree-select';``\n+ add your element:\n\n``\u003cinput type=\"text\" name=\"test\" class=\"treeSelect\" placeholder=\"plz select\"/\u003e``\n\n+ initialze the element with js:\n```javascript\n$(\".treeSelect\").treeSelect({\n        datatree: [\n            // your json here\n        ]\n      });\n```\n\n+ for example in webpack vuejs\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cinput type=\"text\" name=\"test\" class=\"treeSelect\" placeholder=\"plz select\"/\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n\n  import xtreeselec from 'x-tree-select';\n  export default {\n    name: \"mycompnent\",\n    data: function () {\n      return {\n         // ... \n      }\n    },\n    mounted: function () {\n      \n      $(\".treeSelect\").treeSelect({\n        datatree: [\n            // ...\n        ]\n      });\n\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n\n\u003c/style\u003e\n```\n\n## Options\nThe tree select options you can customize your plugine usagae\n\n| Option | Default | Description |\n| ------ | ------ | ------ | \n| `direction`| ltr | you can use rtl too for your project|\n| `searchable`| false | searchable element |\n| `datatree`| []| The data need navigate in tree select watch abow example to how bind this value|\n|`mainTitle`| \"Main category\"| The title of back button to main category list |\n|`transition`| \"fade\"| The change page animation transition effect |\n|`json`| `{title: 'title',value: 'value',child: 'child'}`| The json for your data tree key names you can change keys|\n| `selectablePrernt`| false | Is the parent selectable |\n\n## events\nThe event you can use for tree select\n\n### onOpen\n Triggered when opening select input\n sample:\n ```javascript\n $(\"#tree-select\").treeSelect({\n     onOpen: function(){\n         alert('opened');\n     }\n });\n```  \n### onClose\n Triggered when closing select input\n sample:\n ```javascript\n $(\"#tree-select\").treeSelect({\n     onClose: function(){\n         alert('closed');\n     }\n });\n```  \n          \n### onSelect\n Triggered when selecting select input\n sample:\n ```javascript\n $(\"#tree-select\").treeSelect({\n     onSelect: function(selected){\n         console.log(selected);\n     }\n });\n```  \n\n### onChange\n Triggered when change select input value\n sample:\n ```javascript\n $(\"#tree-select\").treeSelect({\n     onChange: function(oldVal,newVal){\n         console.log(oldVal,newVal);\n     }\n });\n```  \n          \n## Browser compatibility\n- ![ie](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/internet-explorer_9-11/internet-explorer_9-11_16x16.png) IE \u003e= 9\n- ![edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/edge/edge_16x16.png) Edge all version\n- ![firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/firefox/firefox_16x16.png) Firefox \u003e= 16\n- ![safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/safari_1-7/safari_1-7_16x16.png) Safari \u003e=11\n- ![chrom](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chrome/chrome_16x16.png)/![chromium](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chromium/chromium_16x16.png) chrome / chromium \u003e= 26 \n- ![opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/opera/opera_16x16.png) Opera \u003e=15\n- ![android](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/android/android_16x16.png) Android browser \u003e= 4.4\n- Blackberry Browser \u003e=  10\n- ![ios safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/safari-ios_1-6/safari-ios_1-6_16x16.png) iOS Safari \u003e= 7\n\n## Support\nIf you found a bug or have a feature suggestion, please submit it in the Issues tracker.\n\n## Demo\nSee `demo/index.html` for demo.\n\nyou can see online demo (example) here:\n\nhttp://4xmen.ir/github_example/tree-select/demo/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4xmen%2Fx-tree-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4xmen%2Fx-tree-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4xmen%2Fx-tree-select/lists"}