{"id":18547436,"url":"https://github.com/onface/tree-store","last_synced_at":"2025-06-14T22:35:11.232Z","repository":{"id":57379619,"uuid":"68782974","full_name":"onface/tree-store","owner":"onface","description":"基于树形数据,能够快速获取有效数据的方法集","archived":false,"fork":false,"pushed_at":"2017-09-08T02:34:11.000Z","size":931,"stargazers_count":2,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-13T07:15:27.389Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fast-flow.github.io/tree-store/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onface.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-21T05:25:52.000Z","updated_at":"2021-09-14T05:31:20.000Z","dependencies_parsed_at":"2022-09-02T21:51:21.783Z","dependency_job_id":null,"html_url":"https://github.com/onface/tree-store","commit_stats":null,"previous_names":["fast-flow/tree-store"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onface%2Ftree-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onface%2Ftree-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onface%2Ftree-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onface%2Ftree-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onface","download_url":"https://codeload.github.com/onface/tree-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253891784,"owners_count":21979856,"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":[],"created_at":"2024-11-06T20:29:27.778Z","updated_at":"2025-05-15T07:34:20.219Z","avatar_url":"https://github.com/onface.png","language":"JavaScript","readme":"# tree-store\n\n\u003e The methods of gaining valid data quickly based on the trees of data | 基于树形数据,能够快速获取有效数据的方法集\n\n\n\n\u003c!--MARKRUN-HTML\n\u003ciframe src=\"https://ghbtns.com/github-btn.html?user=fast-flow\u0026repo=tree-store\u0026type=star\u0026count=true\" frameborder=\"0\" scrolling=\"0\" width=\"100px\" height=\"30px\"\u003e\u003c/iframe\u003e\n\u003ciframe src=\"https://ghbtns.com/github-btn.html?user=fast-flow\u0026repo=tree-store\u0026type=watch\u0026count=true\u0026v=2\" frameborder=\"0\" scrolling=\"0\" width=\"100px\" height=\"30px\"\u003e\n--\u003e\n\n[🔗 Live demo](https://fast-flow.github.io/tree-store/)  \n[🕐 Releases](https://github.com/fast-flow/tree-store/releases)\n\n[![Build Status](https://api.travis-ci.org/fast-flow/tree-store.svg)](https://travis-ci.org/fast-flow/tree-store) [![NPM version](https://img.shields.io/npm/v/tree-store.svg?style=flat)](https://npmjs.org/package/tree-store) [![NPM downloads](http://img.shields.io/npm/dm/tree-store.svg?style=flat)](https://npmjs.org/package/tree-store)\n\n\n\n## 数据\n\u003e 所有id请保证唯一性,当 ID 出现重复时,组件会抛出错误\n\u003e 标准JSON格式\n\n### 模板数据源\n\u003e 所有的API都基于 两个主要key: **id** **child** , 可以存在任意符合json规则的其他keyname\n\n````js\nwindow.template_data  =  [\n    {\n        \"id\" : \"1\",\n        \"text\" : \"text-1\",\n        \"child\" : [\n            {\n                \"id\" : \"1_1\",\n                \"text\" : \"text-1_1\",\n                \"child\" : [\n                    {\n                        \"id\" : \"1_1_1\",\n                        \"text\" : \"text-1_1_1\",\n                        \"child\" :  [\n                            {\n                                \"id\" :  \"1_1_1_1\",\n                                \"text\" :  \"text-1_1_1_1\"\n                            },\n                            {\n                                \"id\" :  \"1_1_1_2\",\n                                \"text\" :  \"text-1_1_1_2\"\n                            }\n                        ]\n                    },\n                    {\n                        \"id\" : \"1_1_2\",\n                        \"text\" : \"text-1_1_2\"\n                    }\n                ]\n            },\n            {\n                \"id\" : \"1_2\",\n                \"text\" : \"text-1_2\",\n                \"child\" : [\n                    {\n                        \"id\" : \"1_2_1\",\n                        \"text\" : \"text-1_2_1\"\n                    },\n                    {\n                        \"id\" : \"1_2_2\",\n                        \"text\" : \"text-1_2_2\"\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"id\" : \"2\",\n        \"text\" : \"text-2\",\n        \"child\" : [\n            {\n                \"id\" : \"2_1\",\n                \"text\" : \"text-2_1\",\n                \"child\" : []\n            },\n            {\n                \"id\" : \"2_2\",\n                \"text\" : \"text-2_2\",\n                \"child\" : []\n            },\n        ]\n    },\n    {\n        \"id\" : \"3\",\n        \"text\" : \"text-3\",\n        \"child\" : []\n    }\n]\n````\n\n### 示例数据源\n\u003e 此数据缺少两个主要key: **id** **child** , 需要进行key的转化绑定\n\n````js\nwindow.template_data_attr = [\n    {\n        \"value\" : 1,\n        \"name\" : \"name1\",\n        \"node\" : [\n            {\n                \"value\" : 11,\n                \"name\" : \"name11\",\n                \"node\" : [\n                    {\n                        \"value\" : 111,\n                        \"name\" : \"name111\",\n                        \"node\" :  []\n                    },\n                    {\n                        \"value\" : 112,\n                        \"name\" : \"name112\",\n                        \"node\" :  []\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"value\" : 2,\n        \"name\" : \"name2\",\n        \"node\" : [\n            {\n                \"value\" : 21,\n                \"name\" : \"name21\",\n                \"node\" : []\n            }\n        ]\n    },\n    {\n        \"value\" : 3,\n        \"name\" : \"name3\",\n        \"node\" : []\n    }\n]\n````\n\n## 数据处理\n\u003e### **注 : 所有的方法或API调用都不会直接对数据源进行任何改变**\n\n### 1. TreeStore.treeMap(data,childName,fn, parentArray)\n\u003e 可以遍历所有数据, 在 `fn(item)` 需要 `return item`\n\n|   name    |   type    |   description | return |\n|----|----|----|----|\n| data  | Object    |   数据源 |  |\n|   childName|  String  |   下一层数据的key的命名    |  |\n|   fn  |   function(item)    |   回调函数    |  |\n|   parentArray  |   Boolean    |   返回所有祖父元素(默认false)   | Array |\n\n````js\nvar TreeStore = require('tree-store') ;\nconsole.group('TreeStore.treeMap')\nvar data1 = TreeStore.treeMap( template_data_attr , 'node' , function ( item ) {\n    // 如果配置parentArray 则可以打印出此属性\n    console.log('item.value : \\n',item.value,' item[\\'__TreeStore_parentArray\\'] : \\n',item['__TreeStore_parentArray'])\n    item.value = 'id'+item.value.toString()\n    return item\n} , true )\nconsole.log('data1 : \\n',data1)\nconsole.groupEnd()\n/*\ttemplate_data_attr 数据中每个 value 转换成字符类型 并添加id前缀\n[\n    {\n        \"value\": \"id1\",\n        \"name\": \"name1\",\n        \"node\": [\n            {\n                \"value\": \"id11\",\n                \"name\": \"name11\",\n                \"node\": [\n                    {\n                        \"value\": \"id111\",\n                        \"name\": \"name111\",\n                        \"node\": []\n                    },\n                    {\n                        \"value\" : 'id112',\n                        \"name\" : \"name112\",\n                        \"node\" :  []\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"value\": \"id2\",\n        \"name\": \"name2\",\n        \"node\": [\n            {\n                \"value\": \"id21\",\n                \"name\": \"name21\",\n                \"node\": []\n            }\n        ]\n    },\n    {\n        \"value\": \"id3\",\n        \"name\": \"name3\",\n        \"node\": []\n    }\n]\n*/\n````\n\u003e 使用场景 :  有时候数据来源中 id/value 是 **number** 类型,而最终所需数据格式 id/value 应该为 **String**, 此时可以使用 treeMap() 遍历所有数据,自行回调处理\n\n\n### 2. TreeStore.treeFilter(data,childName,fn)\n\u003e 遍历所有数据进行过滤, 在 `fn()` 需要 `return Boolean`\n\n|   name    |   type    |   description |\n|----|----|----|\n| data  | Object    |   数据源 |\n|   childName|  String  |   下一层数据的key的命名    |\n|    fn  |   Function    |   回调函数 ( ture 返回当前元素 ; false 不返回当前元素 )   |\n\n````js\nvar TreeStore = require('tree-store') ;\nvar data2 = TreeStore.treeFilter(template_data_attr,'node',function (item){\n    return (!/2/g.test(item.value))\n})\nconsole.log('data2 : \\n',data2)\n/*  template_data_attr 数据中每个 value 中匹配到`2`的都过滤掉\n[\n    {\n        \"value\": 1,\n        \"name\": \"name1\",\n        \"node\": [\n            {\n                \"value\": 11,\n                \"name\": \"name11\",\n                \"node\": [\n                    {\n                        \"value\": 111,\n                        \"name\": \"name111\",\n                        \"node\": []\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"value\": 3,\n        \"name\": \"name3\",\n        \"node\": []\n    }\n]\n*/\n````\n\n### 3. TreeStore(data)\n\u003e#### *基础使用*\n\u003e 数据源 需要符合两个条件\n\u003e* 3.1 数据格式一致\n\u003e* 3.2 三个主要**key**的命名一致: **id** **child**\n\n\u003e#### *返回一个实例*\n\u003e* 数据被存放在属性data中,请不要自行操作data\n\n````js\nvar TreeStore = require('tree-store') ;\nvar data3 = TreeStore(template_data)\n````\n\n### 4. TreeStore(data,setting)\n\u003e#### *数据的转化*\n\n```\nTreeStore(data,{\n    //模板数据 keyName 对应 示例数据的 DemokeyName\n    keyName :  DemokeyName,\n    keyName2 :  DemokeyName2 ,\n    ...\n})\n```\n\n\u003e 倘若, 示例数据在 上述条件 只满足 3.1\n\u003e 那么, 将示例数据的 key 和模板数据的 key 做绑定\n\u003e##### 注:不会直接对示例数据源进行操作\n\n````js\nvar TreeStore = require('tree-store') ;\nvar data4 = TreeStore(template_data_attr,{\n    //模板数据 id 对应 示例数据的 value\n    id :  'value',\n    //模板数据 child 对应 示例数据的 node\n    child :  'node' ,\n})\nconsole.log(\"data4.data : \\n\",data4.data)\n/*\t示例数据经过处理后\n[\n    {\n        \"id\": 1,\n        \"name\": \"name1\",\n        \"child\": [\n            {\n                \"id\": 11,\n                \"name\": \"name11\",\n                \"child\": [\n                    {\n                        \"id\": 111,\n                        \"name\": \"name111\",\n                        \"child\": []\n                    },\n                    {\n                        \"id\" : 112,\n                        \"name\" : \"name112\",\n                        \"child\" :  []\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"id\": 2,\n        \"name\": \"name2\",\n        \"child\": [\n            {\n                \"id\": 21,\n                \"name\": \"name21\",\n                \"child\": []\n            }\n        ]\n    },\n    {\n        \"id\": 3,\n        \"name\": \"name3\",\n        \"child\": []\n    }\n]\n*/\n````\n\u003e 使用场景 : 项目数据已经成型,无法修改成模板标准数据时,添加第二个参数 将数据转化成标准数据\n\n\n### 5. TreeStore.extendChild(data,id,childData)\n\u003e 将数组 `childData` 设置为某个 id 的 `child` 属性\n\n|   name    |   type    |   description |\n|----|----|----|\n| data  | Array    |   数据源  |\n| id  | String    |   某个id  |\n|   childData  |  Array  |   将设置为child的数据    |\n\n````js\nvar TreeStore = require('tree-store') ;\nvar data5 = TreeStore.extendChild(template_data,'1_1_2',[\n    {\n        id:'1_1_2_1',\n        text:'text-1_1_2_1',\n        child:[\n            {\n                id:'1_1_2_1_1',\n                text:'text-1_1_2_1_1'\n            },{\n                id:'1_1_2_1_2',\n                text:'text-1_1_2_1_2'\n            }\n        ]\n    },\n    {\n        id:'1_1_2_2',\n        text:'text-1_1_2_2'\n    }\n])\nconsole.log(\"data5 : \\n\",data5)\n/*\n[\n    {\n        \"id\": \"1\",\n        \"text\": \"text-1\",\n        \"child\": [\n            {\n                \"id\": \"1_1\",\n                \"text\": \"text-1_1\",\n                \"child\": [\n                    {\n                        \"id\": \"1_1_1\",\n                        \"text\": \"text-1_1_1\",\n                        \"child\": [\n                            {\n                                \"id\": \"1_1_1_1\",\n                                \"text\": \"text-1_1_1_1\"\n                            },\n                            {\n                                \"id\": \"1_1_1_2\",\n                                \"text\": \"text-1_1_1_2\"\n                            }\n                        ]\n                    },\n                    {\n                        \"id\": \"1_1_2\",\n                        \"text\": \"text-1_1_2\",\n                        \"child\": [\n                            {\n                                \"id\": \"1_1_2_1\",\n                                \"text\": \"text-1_1_2_1\"\n                            },\n                            {\n                                \"id\": \"1_1_2_2\",\n                                \"text\": \"text-1_1_2_2\"\n                            }\n                        ]\n                    }\n                ]\n            },\n            {\n                \"id\": \"1_2\",\n                \"text\": \"text-1_2\",\n                \"child\": [\n                    {\n                        \"id\": \"1_2_1\",\n                        \"text\": \"text-1_2_1\"\n                    },\n                    {\n                        \"id\": \"1_2_2\",\n                        \"text\": \"text-1_2_2\"\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"id\": \"2\",\n        \"text\": \"text-2\",\n        \"child\": [\n            {\n                \"id\": \"2_1\",\n                \"text\": \"text-2_1\",\n                \"child\": []\n            },\n            {\n                \"id\": \"2_2\",\n                \"text\": \"text-2_2\",\n                \"child\": []\n            }\n        ]\n    },\n    {\n        \"id\": \"3\",\n        \"text\": \"text-3\",\n        \"child\": []\n    }\n]\n*/\n````\n\n## API\n\u003e 传入 id 如果是 number 也会被转换为string\n\u003e 事例 :  https://github.com/fast-flow/tree-store/tree/master/example\n\n### TreeStore(data).getChildIds(String/Array)\n\u003e 获取id下一层的所有子元素id\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo1 = TreeStore(template_data)\nconsole.log('demo1.getChildIds(\"2\") : \\n',demo1.getChildIds(\"2\"))\n//\t[\"2_1\",\"2_2\"]\nconsole.log('demo1.getChildIds([\"1_2\",\"2\"]) : \\n',demo1.getChildIds([\"1_2\",\"2\"]))\n/*\n[\n    [\"1_2_1\",\"1_2_2\"],\n    [\"2_1\",\"2_2\"]\n]\n*/\n````\n\u003e 使用场景 : 操作第一级下拉框某一项时可以获取当前项的ID, 利用 `getChildIds()` 可快速找出下一层子元素id, 可以立即获取第二级下拉框需要元素, 配合 `getData()` 完成显示内容的渲染\n\n### TreeStore(data).getChildAllIds(String/Array/null)\n\u003e 获取id下所有层级子孙元素 id\n\u003e* 有参数 id 时,当前 id 下所有层级的子孙元素 id\n\u003e* 没有参数id时,返回所有 id 下所有层级的子孙元素 id , 返回类型 object\n\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo2 = TreeStore(template_data)\nconsole.log( \"demo2.getChildAllIds('1') : \\n\",demo2.getChildAllIds('1') )\n//\t[\"1_1\",\"1_2\",\"1_1_1\",\"1_1_2\",\"1_1_1_1\",\"1_1_1_2\",\"1_2_1\",\"1_2_2\"]\nconsole.log( \"demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) : \\n\",demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) )\n/*\n[\n    [\"1_2_1\",\"1_2_2\"],\n    [\"1_1_1_1\",\"1_1_1_2\"]\n]\n*/\nconsole.log( \"demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) : \\n\",demo2.getChildAllIds() )\n/*\n{\n\t\"1\":[\"1_1\",\"1_2\",\"1_1_1\",\"1_1_2\",\"1_1_1_1\",\"1_1_1_2\",\"1_2_1\",\"1_2_2\"],\n\t\"2\":[\"2_1\",\"2_2\"],\n\t\"3\":[],\n\t\"1_1\":[\"1_1_1\",\"1_1_2\",\"1_1_1_1\",\"1_1_1_2\"],\n\t\"1_1_1\":[\"1_1_1_1\",\"1_1_1_2\"],\n\t\"1_1_2\":[],\n\t\"1_2\":[\"1_2_1\",\"1_2_2\"],\n\t\"2_1\":[],\n\t\"2_2\":[]\n}\n*/\n````\n\u003e 使用场景 : 操作某一项时可以获取当前项的ID, 利用 `getChildAllIds()` 可快速找出所有子孙元素id, 对这些子元素做全选或反选操作, 配合 `getData()` 完成显示内容的渲染\n\n### TreeStore(data).getData(String/Array)\n\u003e 获取当前 id 的所有数据 , 包括TEXT,CHILD,...甚至ID本身\n\u003e* 参数单独一个id : getData(id)\n\u003e* 参数多个id : getData([id1,id2,...])\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo3 = TreeStore(template_data)\nconsole.log(\"demo3.getData('2') : \\n\",demo3.getData('2'))\n/*\n{\n    \"id\": \"2\",\n    \"text\": \"text-2\",\n    \"child\": [\n        {\n            \"id\": \"2_1\",\n            \"text\": \"text-2_1\",\n            \"child\": []\n        },\n        {\n            \"id\": \"2_2\",\n            \"text\": \"text-2_2\",\n            \"child\": []\n        }\n    ]\n}\n*/\nconsole.log(\"demo3.getData(['3','2']) : \\n\",demo3.getData(['3','2']))\n/*\n[\n    {\n        \"id\": \"3\",\n        \"text\": \"text-3\",\n        \"child\": []\n    },\n    {\n        \"id\": \"2\",\n        \"text\": \"text-2\",\n        \"child\": [\n            {\n                \"id\": \"2_1\",\n                \"text\": \"text-2_1\",\n                \"child\": []\n            },\n            {\n                \"id\": \"2_2\",\n                \"text\": \"text-2_2\",\n                \"child\": []\n            }\n        ]\n    }\n]\n*/\nconsole.info(JSON.stringify(demo3.getData()))\n/*\n{\n    \"1\": {\n        \"id\": \"1\",\n        \"text\": \"text-1\",\n        \"child\": [\n            {\n                \"id\": \"1_1\",\n                \"text\": \"text-1_1\",\n                \"child\": [\n                    {\n                        \"id\": \"1_1_1\",\n                        \"text\": \"text-1_1_1\",\n                        \"child\": [\n                            {\n                                \"id\": \"1_1_1_1\",\n                                \"text\": \"text-1_1_1_1\"\n                            }, {\n                                \"id\": \"1_1_1_2\",\n                                \"text\": \"text-1_1_1_2\"\n                            }\n                        ]\n                    }, {\n                        \"id\": \"1_1_2\",\n                        \"text\": \"text-1_1_2\",\n                        \"child\": [\n                            {\n                                \"id\": \"1_1_2_1\",\n                                \"text\": \"text-1_1_2_1\"\n                            }, {\n                                \"id\": \"1_1_2_2\",\n                                \"text\": \"text-1_1_2_2\"\n                            }\n                        ]\n                    }\n                ]\n            }, {\n                \"id\": \"1_2\",\n                \"text\": \"text-1_2\",\n                \"child\": [\n                    {\n                        \"id\": \"1_2_1\",\n                        \"text\": \"text-1_2_1\"\n                    }, {\n                        \"id\": \"1_2_2\",\n                        \"text\": \"text-1_2_2\"\n                    }\n                ]\n            }\n        ]\n    },\n    \"2\": {\n        \"id\": \"2\",\n        \"text\": \"text-2\",\n        \"child\": [\n            {\n                \"id\": \"2_1\",\n                \"text\": \"text-2_1\",\n                \"child\": []\n            }, {\n                \"id\": \"2_2\",\n                \"text\": \"text-2_2\",\n                \"child\": []\n            }\n        ]\n    },\n    \"3\": {\n        \"id\": \"3\",\n        \"text\": \"text-3\",\n        \"child\": []\n    },\n    \"1_1\": {\n        \"id\": \"1_1\",\n        \"text\": \"text-1_1\",\n        \"child\": [\n            {\n                \"id\": \"1_1_1\",\n                \"text\": \"text-1_1_1\",\n                \"child\": [\n                    {\n                        \"id\": \"1_1_1_1\",\n                        \"text\": \"text-1_1_1_1\"\n                    }, {\n                        \"id\": \"1_1_1_2\",\n                        \"text\": \"text-1_1_1_2\"\n                    }\n                ]\n            }, {\n                \"id\": \"1_1_2\",\n                \"text\": \"text-1_1_2\",\n                \"child\": [\n                    {\n                        \"id\": \"1_1_2_1\",\n                        \"text\": \"text-1_1_2_1\"\n                    }, {\n                        \"id\": \"1_1_2_2\",\n                        \"text\": \"text-1_1_2_2\"\n                    }\n                ]\n            }\n        ]\n    },\n    \"1_1_1\": {\n        \"id\": \"1_1_1\",\n        \"text\": \"text-1_1_1\",\n        \"child\": [\n            {\n                \"id\": \"1_1_1_1\",\n                \"text\": \"text-1_1_1_1\"\n            }, {\n                \"id\": \"1_1_1_2\",\n                \"text\": \"text-1_1_1_2\"\n            }\n        ]\n    },\n    \"1_1_1_1\": {\n        \"id\": \"1_1_1_1\",\n        \"text\": \"text-1_1_1_1\"\n    },\n    \"1_1_1_2\": {\n        \"id\": \"1_1_1_2\",\n        \"text\": \"text-1_1_1_2\"\n    },\n    \"1_1_2\": {\n        \"id\": \"1_1_2\",\n        \"text\": \"text-1_1_2\",\n        \"child\": [\n            {\n                \"id\": \"1_1_2_1\",\n                \"text\": \"text-1_1_2_1\"\n            }, {\n                \"id\": \"1_1_2_2\",\n                \"text\": \"text-1_1_2_2\"\n            }\n        ]\n    },\n    \"1_1_2_1\": {\n        \"id\": \"1_1_2_1\",\n        \"text\": \"text-1_1_2_1\"\n    },\n    \"1_1_2_2\": {\n        \"id\": \"1_1_2_2\",\n        \"text\": \"text-1_1_2_2\"\n    },\n    \"1_2\": {\n        \"id\": \"1_2\",\n        \"text\": \"text-1_2\",\n        \"child\": [\n            {\n                \"id\": \"1_2_1\",\n                \"text\": \"text-1_2_1\"\n            }, {\n                \"id\": \"1_2_2\",\n                \"text\": \"text-1_2_2\"\n            }\n        ]\n    },\n    \"1_2_1\": {\n        \"id\": \"1_2_1\",\n        \"text\": \"text-1_2_1\"\n    },\n    \"1_2_2\": {\n        \"id\": \"1_2_2\",\n        \"text\": \"text-1_2_2\"\n    },\n    \"2_1\": {\n        \"id\": \"2_1\",\n        \"text\": \"text-2_1\",\n        \"child\": []\n    },\n    \"2_2\": {\n        \"id\": \"2_2\",\n        \"text\": \"text-2_2\",\n        \"child\": []\n    }\n}\n*/\n````\n\u003e 使用场景 : 获取某项/某些项的ID时,可以利用 `getData()` 得到当前ID的其他数据,前提是你有其他数据\n\n### TreeStore(data).getParentAllIds(String/Array)\n\u003e 获取当前id的所有祖父元素id\n\u003e Tip : 获取当前id的第一个最近父元素id,可以试试 `getParentAllIds(id)[0]`\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo4 = TreeStore(template_data)\nconsole.log(\"demo4.getParentAllIds('1_1_2') : \\n\",demo4.getParentAllIds('1_1_2'))\n// [\"1_1\",\"1\"]\nconsole.log(\"demo4.getParentAllIds( [ '1_1_1_1' , '2_1' ] ) : \\n\",demo4.getParentAllIds( [ '1_1_1_1' , '2_1' ] ) )\n/*\n[\n    [\"1_1_1\",\"1_1\",\"1\"],\n    [\"2\"]\n]\n*/\n````\n\u003e 使用场景 : 对某一列某一项进行操作时, 可以获取当前项的ID, 此列有选择/全反选时, 利用 `getParentAllIds()` 可以快速获取所有祖父元素, 进行相应关联状态的改变\n\n\n### TreeStore(data).getChildLeftBranchIds(String/null)\n\u003e 获取当前id的所有第一层子元素及首个子孙元素(即 此id的子元素 并 取左叉树的子元素id为新的id 取其子元素 以此类推)\n\u003e* 没有参数id时,所有元素及首个子孙元素\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo6 = TreeStore(template_data)\nconsole.log(\"demo6.getChildLeftBranchIds('1_1') : \\n\",demo6.getChildLeftBranchIds('1_1'))\n/*\n[\n    [\"1_1_1\",\"1_1_2\"],\n    [\"1_1_1_1\",\"1_1_1_2\"]\n]\n*/\nconsole.log(\"demo6.getChildLeftBranchIds() : \\n\",demo6.getChildLeftBranchIds())\n/*\n[\n    [\"1\",\"2\",\"3\"],\n    [\"1_1\",\"1_2\"],\n    [\"1_1_1\",\"1_1_2\"],\n    [\"1_1_1_1\",\"1_1_1_2\"]\n]\n*/\nconsole.log(\"demo6.getChildLeftBranchIds('1_1_1_1') : \\n\",demo6.getChildLeftBranchIds('1_1_1_1'))\n/*\n[]\n*/\n````\n\u003e 使用场景 : 在级联下拉框中, 操作某一项时可以获取当前项的ID, 利用 `getChildLeftBranchIds()` 方法可以快速获取后几级下拉框的默认渲染选项, 防止在无值时下拉框都是空白现象\n\n### TreeStore(data).getSiblingIds(String/null)\n\u003e 获取当前id的所有兄弟元素id(包括当前id本身)\n\u003e* 没有参数id时,默认取数据的第一层所有id(多此一举,不建议调用此API传空值)\n\u003e* 传入数组时,如遇id是空字符串,则直接返回空数组\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo7 = TreeStore(template_data)\nconsole.log(\"demo7.getSiblingIds('1_1') : \\n\",demo7.getSiblingIds('1_1'))\n// [\"1_1\",\"1_2\"]\nconsole.log(\"demo7.getSiblingIds() : \\n\",demo7.getSiblingIds())\n// [\"1\", \"2\", \"3\"]\n````\n\u003e 使用场景 : 在下拉框中, 有默认值时, 利用 `getSiblingIds()` 方法可以快速渲染出对应下拉框选项\n\n## API--之树形业务\n\u003e 为什么将下面两个API独立出来?\n\u003e 因为它是对已有的API进行再次封装,使树形业务场景中的数据操作更简便\n\n### 示例数据--之树形业务\n\u003e 相比之 模板数据 , 示例数据 添加了一个checked属性, 但不要求你的数据源必须有此属性\n\n\n````js\nwindow.template_data_tree  =  [\n    {\n        \"id\" : \"1\",\n        \"text\" : \"text-1\",\n        \"child\" : [\n            {\n                \"id\" : \"1_1\",\n                \"text\" : \"text-1_1\",\n                \"checked\":true,\n                \"child\" : [\n                    {\n                        \"id\" : \"1_1_1\",\n                        \"text\" : \"text-1_1_1\",\n                        \"checked\":true,\n                        \"child\" :  [\n                            {\n                                \"id\" :  \"1_1_1_1\",\n                                \"text\" :  \"text-1_1_1_1\",\n                                \"checked\":true,\n                            },\n                            {\n                                \"id\" :  \"1_1_1_2\",\n                                \"text\" :  \"text-1_1_1_2\",\n                                \"checked\":true,\n                            }\n                        ]\n                    },\n                    {\n                        \"id\" : \"1_1_2\",\n                        \"text\" : \"text-1_1_2\"\n                    }\n                ]\n            },\n            {\n                \"id\" : \"1_2\",\n                \"text\" : \"text-1_2\",\n                \"child\" : [\n                    {\n                        \"id\" : \"1_2_1\",\n                        \"text\" : \"text-1_2_1\"\n                    },\n                    {\n                        \"id\" : \"1_2_2\",\n                        \"text\" : \"text-1_2_2\"\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        \"id\" : \"2\",\n        \"text\" : \"text-2\",\n        \"child\" : [\n            {\n                \"id\" : \"2_1\",\n                \"text\" : \"text-2_1\",\n                \"checked\":true,\n                \"child\" : []\n            },\n            {\n                \"id\" : \"2_2\",\n                \"text\" : \"text-2_2\",\n                \"child\" : []\n            },\n        ]\n    },\n    {\n        \"id\" : \"3\",\n        \"text\" : \"text-3\",\n        \"child\" : []\n    }\n]\n````\n\n### TreeStore(data).getChecked()\n\u003e 找出数据源中所有checked属性为true的id并返回\n\u003e 此API使用前提 : 数据中有checked属性  !!Q:(欲有isChecked初始值首次获取checkIds)\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo8 = TreeStore(template_data_tree).getChecked()\nconsole.log(\"demo8 : \\n\",demo8)\n// [\"1_1\",\"1_1_1\",\"1_1_1_1\",\"1_1_1_2\",\"2_1\"]\n````\n\n### TreeStore(data).changeChecked(Object)\n\u003e 改变任一id的选中状态,可以返回计算后的所有选中id\n\n```\ntreeStore( data ).changeChecked( {\n    id : id,\n    isChecked : Boolean ,\n    checkedIds : [ id1 , id2 , ... ] ,\n    autoLink : {\n        parent : true,\n        child : true\n    }\n} )\n```\n\n|    name   |    default   |   type    |    description   |\n|------|------|------|------|\n|    id   |     |    String   |   当前操作的id    |\n|    isChecked   |     |    Boolean   |   当前操作id的是否选中状态(change前一刻状态)    |\n|    checkedIds   |     |    Array   |    当前已选中的所有ID   |\n|    autoLink   |   true  |    Object   |    是否自动关联延伸到祖父元素和子孙元素 , 默认都关联   |\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo9 = TreeStore(template_data_tree).changeChecked({\n    id : '1_1_1',\n    isChecked : true,\n    checkedIds : [ '1' , '1_1' , '1_1_1' , '1_1_1_1' , '2' , '2_1' , '2_2' ],\n    autoLink : {\n        parent : false,\n        child : false\n    }\n})\nconsole.log(\"demo9 : \\n\",demo9)\n/*\n{\n    \"change\":{\n        \"unchecked_ids\":[\"1_1_1\"],\n        \"checked_ids\":[]\n    },\n    \"checked\":[\"1\" , \"1_1\" , \"1_1_1_1\" , \"2\" , \"2_1\" , \"2_2\"]\n}\n*/\nvar demo10 = TreeStore(template_data_tree).changeChecked({\n    id : '1_1_1',\n    isChecked : false,\n    checkedIds : [ '1' , '1_1' , '1_1_1' , '1_1_1_1' , '2' , '2_1' , '2_2' ]\n})\nconsole.log(\"demo10 : \\n\",demo10)\n/*\n{\n    \"change\":{\n        \"unchecked_ids\":[],\n        \"checked_ids\":[\"1\",\"1_1\",\"1_1_1\",\"1_1_1_1\",\"1_1_1_2\"]\n    },\n    \"checked\":[\"1\",\"1_1\",\"1_1_1\",\"1_1_1_1\",\"1_1_1_2\",\"2\",\"2_1\",\"2_2\"]\n}\n*/\n````\n\n## API--之级联下拉框\n\u003e 为什么将以下API独立出来?\n\u003e 因为它是对已有的API进行再次封装,使在级联下拉框业务场景中的数据操作更简便\n\n### TreeStore(data).changeSelect(String)\n\u003e 根据传入的 id ,返回正确的选中id数组\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo11 = TreeStore(template_data).changeSelect('1_2')\nconsole.log(\"demo11 : \\n\",demo11)\n// [\"1\", \"1_2\", \"1_2_1\"]\n````\n\n\n### TreeStore(data).renderSelect(Object)\n\u003e 返回当前所有下拉框渲染的数据\n\n```\nTreeStore( data ).renderSelect( {\n    maxLength : Number,\n    minLength : Number,\n    checked : [ id1 , id2 , ... ] ,\n    filObj : {\n        id:'0',\n        text:'all'\n    }\n} )\n```\n\n|    name   |    type   |   description    |\n|------|------|------|\n|    minLength   |    Number   |    返回结果数组的最小长度(即 渲染的下拉框最少个数) , 此参数可省略  |\n|    maxLength   |    Number   |    返回结果数组的最长长度(即 渲染的下拉框最多个数) , 此参数可省略  |\n|    checked   |    Array   |    已选中的id ( 传入数组长度,需要与渲染的级联下拉框个数相同,没有默认值id时,请传空字符串,保证数组长度 )   |\n|    filObj   |    Object  |   需要填充的数据    |\n\n\n````js\nvar TreeStore = require('tree-store') ;\nvar demo12 = TreeStore(template_data).renderSelect({\n    checked : [\"1\", \"1_2\", \"1_2_1\"] ,\n})\nconsole.log(\"demo12 : \\n\",demo12)\n/*\n[\n        [\n                {\n                    \"id\" : \"1\",\n                    \"text\" : \"text-1\",\n                    \"child\" : [...]  //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略\n                },\n                {\n                    \"id\" : \"2\",\n                    \"text\" : \"text-2\",\n                    \"child\" : [...]  //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略\n                },\n                {\n                    \"id\" : \"3\",\n                    \"text\" : \"text-3\",\n                    \"child\" : []\n                }\n        ],\n                [\n                {\n                    \"id\" : \"1_1\",\n                    \"text\" : \"text-1_1\",\n                    \"child\" : [...]  //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略\n                },\n                {\n                    \"id\" : \"1_2\",\n                    \"text\" : \"text-1_2\",\n                    \"child\" : [...]  //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略\n                }\n        ],\n        [\n                {\n                    \"id\" : \"1_2_1\",\n                    \"text\" : \"text-1_2_1\"\n                },\n                {\n                    \"id\" : \"1_2_2\",\n                    \"text\" : \"text-1_2_2\"\n                }\n        ]\n]\n*/\nvar demo13 = TreeStore(template_data).renderSelect({\n    checked : [\"2\", \"2-1\"] ,\n    minLength : 4 ,\n    filObj : {\n        id : '0' ,\n        text : 'all'\n    }\n})\nconsole.log(\"demo13 : \\n\",demo13)\n````\n\n## 参与开发 - development\n\n```shell\nnpm i -g fis3 --registry=https : //registry.npm.taobao.org\n# 安装依赖\nnpm run dep\n# 服务器\nnpm run s\n# 开发\nnpm run dev\n\n\n# 构建 gh-pages 版本 到 output/\nnpm run gh\n# 将 output/** 发布到 gh-pages 分支\nnpm run gh-push\n# 构建 npm 要发布的代码到 output/\nnpm run npm\n```\n\n\u003e For npm owner :  npm publish Need to be in ./output\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonface%2Ftree-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonface%2Ftree-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonface%2Ftree-store/lists"}