{"id":13657858,"url":"https://github.com/daweilv/treejs","last_synced_at":"2025-04-24T08:30:43.103Z","repository":{"id":33117862,"uuid":"135718083","full_name":"daweilv/treejs","owner":"daweilv","description":"A lightweight tree widget, compatible with VanillaJS / React / Vue. Tiny size after gzip. Zero dependence.","archived":false,"fork":false,"pushed_at":"2024-03-17T09:26:08.000Z","size":312,"stargazers_count":151,"open_issues_count":28,"forks_count":49,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-18T21:30:06.903Z","etag":null,"topics":["jstree","react-tree","select-tree","tree","treejs","vue-tree"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daweilv.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":"2018-06-01T12:59:52.000Z","updated_at":"2025-03-26T19:18:58.000Z","dependencies_parsed_at":"2024-03-17T10:32:55.122Z","dependency_job_id":"0d970110-ade1-471a-8c8c-37236f94b288","html_url":"https://github.com/daweilv/treejs","commit_stats":{"total_commits":59,"total_committers":8,"mean_commits":7.375,"dds":0.4915254237288136,"last_synced_commit":"3ebb96028a6ac8158e4c991b4b5e57ffa25f04ca"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daweilv%2Ftreejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daweilv%2Ftreejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daweilv%2Ftreejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daweilv%2Ftreejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daweilv","download_url":"https://codeload.github.com/daweilv/treejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250591896,"owners_count":21455455,"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":["jstree","react-tree","select-tree","tree","treejs","vue-tree"],"created_at":"2024-08-02T05:00:52.129Z","updated_at":"2025-04-24T08:30:42.552Z","avatar_url":"https://github.com/daweilv.png","language":"JavaScript","readme":"# @widgetjs/tree\n\n[![Version](https://img.shields.io/npm/v/@widgetjs/tree?style=flat)](https://npmjs.com/package/@widgetjs/tree)\n[![Downloads Total](https://img.shields.io/npm/dt/@widgetjs/tree.svg?style=flat-square)](https://npmjs.com/package/@widgetjs/tree)\n[![Downloads Monthly](https://img.shields.io/npm/dm/@widgetjs/tree.svg?style=flat-square)](https://www.npmjs.com/package/@widgetjs/tree)\n[![gzip size](https://flat.badgen.net/bundlephobia/minzip/@widgetjs/tree)](https://bundlephobia.com/result?p=@widgetjs/tree)\n[![gzip size](https://img.shields.io/github/stars/daweilv/treejs?style=social)](https://github.com/daweilv/treejs)\n\nA lightweight flexible tree widget.\n\n## Features\n\n* 🚀 Compatible with VanillaJS / React / Vue\n* ✂️ Tiny size after gzip\n* 🎊 Zero dependence\n* 🎉 Events supported\n\n## Demo\n\n[Online Demo](https://daweilv.github.io/treejs/)\n\n![demo.gif](https://daweilv.github.io/treejs/demo.gif)\n\n## Install\n\n```bash\nnpm i -S @widgetjs/tree\n```\n\n## Usage\n\n### React/Vue usage\n\n```js\nimport Tree from '@widgetjs/tree';\n```\n\n### VanillaJS usage\n\n```html\n\u003cscript src=\"path/to/tree.min.js\"\u003e\u003c/script\u003e\n```\n\n## Initialize\n\n`new Tree(treeContainer, parameters)`, returns initialized Tree instance.\n\n* `treeContainer` - string - css selector of the tree container(`document.querySelector` inside).\n* `parameters` - object - options of the tree.\n\n## Basic Node Format\n\n```json\n{\n  \"id\": \"unique_ID\",\n  \"text\": \"node-0\",\n  \"attributes\": {},\n  \"children\": [],\n  \"checked\": true\n}\n```\n\n| Name       | Type    | Description                         | Required |\n| ---------- | ------- | ----------------------------------- | -------- |\n| id         | any     | unique id                           | Required |\n| text       | string  | tree node label                     | Required |\n| attributes | object  | custom attributes of the node       | Optional |\n| children   | array   | children of current node            | Optional |\n| checked      | boolean | whether the node is selected or not | Optional |\n\n### Example\n\n```js\nconst myTree = new Tree('#container', {\n  url: '/api/treeJson',\n});\n```\n\n## Parameters\n\n| Name       | Type     | Description                                                         |\n| ---------- | -------- | ------------------------------------------------------------------- |\n| url        | string   | a URL to retrieve remote data,or use `data`                         |\n| method     | string   | http method(GET/POST), default 'GET'                                |\n| data       | array    | the json tree data                                                  |\n| values     | array    | ids which you want to check                                         |\n| closeDepth | integer  | expand level                                                        |\n| beforeLoad | function | invoke before the tree load data. Format raw data in this function. |\n| loaded     | function | invoke after the tree load data                                     |\n| onChange   | function | invoke when the node status change                                  |\n\n### Example\n\n```js\nconst treeData = [\n  {\n    id: '0',\n    text: 'node-0',\n    children: [\n      {\n        id: '0-0',\n        text: 'node-0-0',\n        children: [\n          {id: '0-0-0', text: 'node-0-0-0'},\n          {id: '0-0-1', text: 'node-0-0-1'},\n          {id: '0-0-2', text: 'node-0-0-2'},\n        ],\n      },\n      {id: '0-1', text: 'node-0-1'},\n    ],\n  },\n  {\n    id: '1',\n    text: 'node-1',\n    children: [{id: '1-0', text: 'node-1-0'}, {id: '1-1', text: 'node-1-1'}],\n  },\n];\n\nconst myTree = new Tree('#container', {\n  data: treeData,\n});\n```\n\n```js\nconst myTree = new Tree('#container', {\n  url: '/api/treeJson',\n  method: 'GET',\n\n  values: ['1', '2', '3'],\n\n  // only expand level 1 node\n  closeDepth: 1,\n\n  beforeLoad: function(rawData) {\n    function formatData() {\n      // do some format\n    }\n    return formatData(rawData);\n  },\n\n  loaded: function() {\n    // do something or set values after Tree loaded callback\n    // do not use arrow function `()=\u003e` , if you use `this`, use function instead.\n    // this context bind current tree instance\n    this.values = ['0-1'];\n  },\n\n  onChange: function() {\n    console.log(this.values);\n  },\n});\n```\n\n## Properties\n\n| Property      | Type  | Operation | Description                                |\n| ------------- | ----- | --------- | ------------------------------------------ |\n| values        | array | get/set   | selected values.                           |\n| selectedNodes | array | get       | selected nodes data with attributes.       |\n| disables      | array | get/set   | get disabled values, or set disable nodes. |\n| disabledNodes | array | get       | disabled nodes data with attributes.       |\n\n### myTree.values\n\n```js\n// get\nconst values = myTree.values;\n\n// set\ntree.values = ['0-1'];\n```\n\n### myTree.selectedNodes\n\n```js\n// get\nconst selectedNodes = myTree.selectedNodes;\n```\n\n### myTree.disables\n\n```js\n// get\nconst disables = myTree.disables;\n\n// set\ntree.disables = ['0-1'];\n```\n\n### myTree.disabledNodes\n\n```js\n// get\nconst disabledNodes = myTree.disabledNodes;\n```\n\n## Events\n\n| Event      | Parameters   | Description                        |\n| ---------- | ------------ | ---------------------------------- |\n| beforeLoad | current data | invoke before the tree load data   |\n| loaded     | null         | invoke after the tree load data    |\n| onChange   | null         | invoke when the node status change |\n\n## Methods\n\n| Method      | Parameters   | Description                        |\n| ----------- | ------------ | ---------------------------------- |\n| expandAll   | null         | expand all tree nodes              |\n| collapseAll | null         | collapse all tree nodes            |\n\n## License\n\n[MIT](./LICENSE)\n\n---\n\nLike @widgetjs/tree? just 🌟 star the project!\n[Create issues](https://github.com/daweilv/treejs/issues) if you find bug.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaweilv%2Ftreejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaweilv%2Ftreejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaweilv%2Ftreejs/lists"}