0.0.10 • Published 7 years ago
tree-store v0.0.10
tree-store
The methods of gaining valid data quickly based on the trees of data | 基于树形数据,能够快速获取有效数据的方法集
数据
所有id请保证唯一性,当 ID 出现重复时,组件会抛出错误 标准JSON格式
模板数据源
所有的API都基于 两个主要key: id child , 可以存在任意符合json规则的其他keyname
window.template_data = [
{
"id" : "1",
"text" : "text-1",
"child" : [
{
"id" : "1_1",
"text" : "text-1_1",
"child" : [
{
"id" : "1_1_1",
"text" : "text-1_1_1",
"child" : [
{
"id" : "1_1_1_1",
"text" : "text-1_1_1_1"
},
{
"id" : "1_1_1_2",
"text" : "text-1_1_1_2"
}
]
},
{
"id" : "1_1_2",
"text" : "text-1_1_2"
}
]
},
{
"id" : "1_2",
"text" : "text-1_2",
"child" : [
{
"id" : "1_2_1",
"text" : "text-1_2_1"
},
{
"id" : "1_2_2",
"text" : "text-1_2_2"
}
]
}
]
},
{
"id" : "2",
"text" : "text-2",
"child" : [
{
"id" : "2_1",
"text" : "text-2_1",
"child" : []
},
{
"id" : "2_2",
"text" : "text-2_2",
"child" : []
},
]
},
{
"id" : "3",
"text" : "text-3",
"child" : []
}
]示例数据源
此数据缺少两个主要key: id child , 需要进行key的转化绑定
window.template_data_attr = [
{
"value" : 1,
"name" : "name1",
"node" : [
{
"value" : 11,
"name" : "name11",
"node" : [
{
"value" : 111,
"name" : "name111",
"node" : []
},
{
"value" : 112,
"name" : "name112",
"node" : []
}
]
}
]
},
{
"value" : 2,
"name" : "name2",
"node" : [
{
"value" : 21,
"name" : "name21",
"node" : []
}
]
},
{
"value" : 3,
"name" : "name3",
"node" : []
}
]数据处理
注 : 所有的方法或API调用都不会直接对数据源进行任何改变
1. TreeStore.treeMap(data,childName,fn, parentArray)
可以遍历所有数据, 在
fn(item)需要return item
| name | type | description | return |
|---|---|---|---|
| data | Object | 数据源 | |
| childName | String | 下一层数据的key的命名 | |
| fn | function(item) | 回调函数 | |
| parentArray | Boolean | 返回所有祖父元素(默认false) | Array |
var TreeStore = require('tree-store') ;
console.group('TreeStore.treeMap')
var data1 = TreeStore.treeMap( template_data_attr , 'node' , function ( item ) {
// 如果配置parentArray 则可以打印出此属性
console.log('item.value : \n',item.value,' item[\'__TreeStore_parentArray\'] : \n',item['__TreeStore_parentArray'])
item.value = 'id'+item.value.toString()
return item
} , true )
console.log('data1 : \n',data1)
console.groupEnd()
/* template_data_attr 数据中每个 value 转换成字符类型 并添加id前缀
[
{
"value": "id1",
"name": "name1",
"node": [
{
"value": "id11",
"name": "name11",
"node": [
{
"value": "id111",
"name": "name111",
"node": []
},
{
"value" : 'id112',
"name" : "name112",
"node" : []
}
]
}
]
},
{
"value": "id2",
"name": "name2",
"node": [
{
"value": "id21",
"name": "name21",
"node": []
}
]
},
{
"value": "id3",
"name": "name3",
"node": []
}
]
*/使用场景 : 有时候数据来源中 id/value 是 number 类型,而最终所需数据格式 id/value 应该为 String, 此时可以使用 treeMap() 遍历所有数据,自行回调处理
2. TreeStore.treeFilter(data,childName,fn)
遍历所有数据进行过滤, 在
fn()需要return Boolean
| name | type | description |
|---|---|---|
| data | Object | 数据源 |
| childName | String | 下一层数据的key的命名 |
| fn | Function | 回调函数 ( ture 返回当前元素 ; false 不返回当前元素 ) |
var TreeStore = require('tree-store') ;
var data2 = TreeStore.treeFilter(template_data_attr,'node',function (item){
return (!/2/g.test(item.value))
})
console.log('data2 : \n',data2)
/* template_data_attr 数据中每个 value 中匹配到`2`的都过滤掉
[
{
"value": 1,
"name": "name1",
"node": [
{
"value": 11,
"name": "name11",
"node": [
{
"value": 111,
"name": "name111",
"node": []
}
]
}
]
},
{
"value": 3,
"name": "name3",
"node": []
}
]
*/3. TreeStore(data)
基础使用
数据源 需要符合两个条件
- 3.1 数据格式一致
- 3.2 三个主要key的命名一致: id child
返回一个实例
- 数据被存放在属性data中,请不要自行操作data
var TreeStore = require('tree-store') ;
var data3 = TreeStore(template_data)4. TreeStore(data,setting)
数据的转化
TreeStore(data,{
//模板数据 keyName 对应 示例数据的 DemokeyName
keyName : DemokeyName,
keyName2 : DemokeyName2 ,
...
})倘若, 示例数据在 上述条件 只满足 3.1 那么, 将示例数据的 key 和模板数据的 key 做绑定
注:不会直接对示例数据源进行操作
var TreeStore = require('tree-store') ;
var data4 = TreeStore(template_data_attr,{
//模板数据 id 对应 示例数据的 value
id : 'value',
//模板数据 child 对应 示例数据的 node
child : 'node' ,
})
console.log("data4.data : \n",data4.data)
/* 示例数据经过处理后
[
{
"id": 1,
"name": "name1",
"child": [
{
"id": 11,
"name": "name11",
"child": [
{
"id": 111,
"name": "name111",
"child": []
},
{
"id" : 112,
"name" : "name112",
"child" : []
}
]
}
]
},
{
"id": 2,
"name": "name2",
"child": [
{
"id": 21,
"name": "name21",
"child": []
}
]
},
{
"id": 3,
"name": "name3",
"child": []
}
]
*/使用场景 : 项目数据已经成型,无法修改成模板标准数据时,添加第二个参数 将数据转化成标准数据
5. TreeStore.extendChild(data,id,childData)
将数组
childData设置为某个 id 的child属性
| name | type | description |
|---|---|---|
| data | Array | 数据源 |
| id | String | 某个id |
| childData | Array | 将设置为child的数据 |
var TreeStore = require('tree-store') ;
var data5 = TreeStore.extendChild(template_data,'1_1_2',[
{
id:'1_1_2_1',
text:'text-1_1_2_1',
child:[
{
id:'1_1_2_1_1',
text:'text-1_1_2_1_1'
},{
id:'1_1_2_1_2',
text:'text-1_1_2_1_2'
}
]
},
{
id:'1_1_2_2',
text:'text-1_1_2_2'
}
])
console.log("data5 : \n",data5)
/*
[
{
"id": "1",
"text": "text-1",
"child": [
{
"id": "1_1",
"text": "text-1_1",
"child": [
{
"id": "1_1_1",
"text": "text-1_1_1",
"child": [
{
"id": "1_1_1_1",
"text": "text-1_1_1_1"
},
{
"id": "1_1_1_2",
"text": "text-1_1_1_2"
}
]
},
{
"id": "1_1_2",
"text": "text-1_1_2",
"child": [
{
"id": "1_1_2_1",
"text": "text-1_1_2_1"
},
{
"id": "1_1_2_2",
"text": "text-1_1_2_2"
}
]
}
]
},
{
"id": "1_2",
"text": "text-1_2",
"child": [
{
"id": "1_2_1",
"text": "text-1_2_1"
},
{
"id": "1_2_2",
"text": "text-1_2_2"
}
]
}
]
},
{
"id": "2",
"text": "text-2",
"child": [
{
"id": "2_1",
"text": "text-2_1",
"child": []
},
{
"id": "2_2",
"text": "text-2_2",
"child": []
}
]
},
{
"id": "3",
"text": "text-3",
"child": []
}
]
*/API
传入 id 如果是 number 也会被转换为string 事例 : https://github.com/fast-flow/tree-store/tree/master/example
TreeStore(data).getChildIds(String/Array)
获取id下一层的所有子元素id
var TreeStore = require('tree-store') ;
var demo1 = TreeStore(template_data)
console.log('demo1.getChildIds("2") : \n',demo1.getChildIds("2"))
// ["2_1","2_2"]
console.log('demo1.getChildIds(["1_2","2"]) : \n',demo1.getChildIds(["1_2","2"]))
/*
[
["1_2_1","1_2_2"],
["2_1","2_2"]
]
*/使用场景 : 操作第一级下拉框某一项时可以获取当前项的ID, 利用
getChildIds()可快速找出下一层子元素id, 可以立即获取第二级下拉框需要元素, 配合getData()完成显示内容的渲染
TreeStore(data).getChildAllIds(String/Array/null)
获取id下所有层级子孙元素 id
- 有参数 id 时,当前 id 下所有层级的子孙元素 id
- 没有参数id时,返回所有 id 下所有层级的子孙元素 id , 返回类型 object
var TreeStore = require('tree-store') ;
var demo2 = TreeStore(template_data)
console.log( "demo2.getChildAllIds('1') : \n",demo2.getChildAllIds('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"]
console.log( "demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) : \n",demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) )
/*
[
["1_2_1","1_2_2"],
["1_1_1_1","1_1_1_2"]
]
*/
console.log( "demo2.getChildAllIds( [ '1_2' , '1_1_1' ] ) : \n",demo2.getChildAllIds() )
/*
{
"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"],
"2":["2_1","2_2"],
"3":[],
"1_1":["1_1_1","1_1_2","1_1_1_1","1_1_1_2"],
"1_1_1":["1_1_1_1","1_1_1_2"],
"1_1_2":[],
"1_2":["1_2_1","1_2_2"],
"2_1":[],
"2_2":[]
}
*/使用场景 : 操作某一项时可以获取当前项的ID, 利用
getChildAllIds()可快速找出所有子孙元素id, 对这些子元素做全选或反选操作, 配合getData()完成显示内容的渲染
TreeStore(data).getData(String/Array)
获取当前 id 的所有数据 , 包括TEXT,CHILD,...甚至ID本身
- 参数单独一个id : getData(id)
- 参数多个id : getData(id1,id2,...)
var TreeStore = require('tree-store') ;
var demo3 = TreeStore(template_data)
console.log("demo3.getData('2') : \n",demo3.getData('2'))
/*
{
"id": "2",
"text": "text-2",
"child": [
{
"id": "2_1",
"text": "text-2_1",
"child": []
},
{
"id": "2_2",
"text": "text-2_2",
"child": []
}
]
}
*/
console.log("demo3.getData(['3','2']) : \n",demo3.getData(['3','2']))
/*
[
{
"id": "3",
"text": "text-3",
"child": []
},
{
"id": "2",
"text": "text-2",
"child": [
{
"id": "2_1",
"text": "text-2_1",
"child": []
},
{
"id": "2_2",
"text": "text-2_2",
"child": []
}
]
}
]
*/
console.info(JSON.stringify(demo3.getData()))
/*
{
"1": {
"id": "1",
"text": "text-1",
"child": [
{
"id": "1_1",
"text": "text-1_1",
"child": [
{
"id": "1_1_1",
"text": "text-1_1_1",
"child": [
{
"id": "1_1_1_1",
"text": "text-1_1_1_1"
}, {
"id": "1_1_1_2",
"text": "text-1_1_1_2"
}
]
}, {
"id": "1_1_2",
"text": "text-1_1_2",
"child": [
{
"id": "1_1_2_1",
"text": "text-1_1_2_1"
}, {
"id": "1_1_2_2",
"text": "text-1_1_2_2"
}
]
}
]
}, {
"id": "1_2",
"text": "text-1_2",
"child": [
{
"id": "1_2_1",
"text": "text-1_2_1"
}, {
"id": "1_2_2",
"text": "text-1_2_2"
}
]
}
]
},
"2": {
"id": "2",
"text": "text-2",
"child": [
{
"id": "2_1",
"text": "text-2_1",
"child": []
}, {
"id": "2_2",
"text": "text-2_2",
"child": []
}
]
},
"3": {
"id": "3",
"text": "text-3",
"child": []
},
"1_1": {
"id": "1_1",
"text": "text-1_1",
"child": [
{
"id": "1_1_1",
"text": "text-1_1_1",
"child": [
{
"id": "1_1_1_1",
"text": "text-1_1_1_1"
}, {
"id": "1_1_1_2",
"text": "text-1_1_1_2"
}
]
}, {
"id": "1_1_2",
"text": "text-1_1_2",
"child": [
{
"id": "1_1_2_1",
"text": "text-1_1_2_1"
}, {
"id": "1_1_2_2",
"text": "text-1_1_2_2"
}
]
}
]
},
"1_1_1": {
"id": "1_1_1",
"text": "text-1_1_1",
"child": [
{
"id": "1_1_1_1",
"text": "text-1_1_1_1"
}, {
"id": "1_1_1_2",
"text": "text-1_1_1_2"
}
]
},
"1_1_1_1": {
"id": "1_1_1_1",
"text": "text-1_1_1_1"
},
"1_1_1_2": {
"id": "1_1_1_2",
"text": "text-1_1_1_2"
},
"1_1_2": {
"id": "1_1_2",
"text": "text-1_1_2",
"child": [
{
"id": "1_1_2_1",
"text": "text-1_1_2_1"
}, {
"id": "1_1_2_2",
"text": "text-1_1_2_2"
}
]
},
"1_1_2_1": {
"id": "1_1_2_1",
"text": "text-1_1_2_1"
},
"1_1_2_2": {
"id": "1_1_2_2",
"text": "text-1_1_2_2"
},
"1_2": {
"id": "1_2",
"text": "text-1_2",
"child": [
{
"id": "1_2_1",
"text": "text-1_2_1"
}, {
"id": "1_2_2",
"text": "text-1_2_2"
}
]
},
"1_2_1": {
"id": "1_2_1",
"text": "text-1_2_1"
},
"1_2_2": {
"id": "1_2_2",
"text": "text-1_2_2"
},
"2_1": {
"id": "2_1",
"text": "text-2_1",
"child": []
},
"2_2": {
"id": "2_2",
"text": "text-2_2",
"child": []
}
}
*/使用场景 : 获取某项/某些项的ID时,可以利用
getData()得到当前ID的其他数据,前提是你有其他数据
TreeStore(data).getParentAllIds(String/Array)
获取当前id的所有祖父元素id Tip : 获取当前id的第一个最近父元素id,可以试试
getParentAllIds(id)[0]
var TreeStore = require('tree-store') ;
var demo4 = TreeStore(template_data)
console.log("demo4.getParentAllIds('1_1_2') : \n",demo4.getParentAllIds('1_1_2'))
// ["1_1","1"]
console.log("demo4.getParentAllIds( [ '1_1_1_1' , '2_1' ] ) : \n",demo4.getParentAllIds( [ '1_1_1_1' , '2_1' ] ) )
/*
[
["1_1_1","1_1","1"],
["2"]
]
*/使用场景 : 对某一列某一项进行操作时, 可以获取当前项的ID, 此列有选择/全反选时, 利用
getParentAllIds()可以快速获取所有祖父元素, 进行相应关联状态的改变
TreeStore(data).getChildLeftBranchIds(String/null)
获取当前id的所有第一层子元素及首个子孙元素(即 此id的子元素 并 取左叉树的子元素id为新的id 取其子元素 以此类推)
- 没有参数id时,所有元素及首个子孙元素
var TreeStore = require('tree-store') ;
var demo6 = TreeStore(template_data)
console.log("demo6.getChildLeftBranchIds('1_1') : \n",demo6.getChildLeftBranchIds('1_1'))
/*
[
["1_1_1","1_1_2"],
["1_1_1_1","1_1_1_2"]
]
*/
console.log("demo6.getChildLeftBranchIds() : \n",demo6.getChildLeftBranchIds())
/*
[
["1","2","3"],
["1_1","1_2"],
["1_1_1","1_1_2"],
["1_1_1_1","1_1_1_2"]
]
*/
console.log("demo6.getChildLeftBranchIds('1_1_1_1') : \n",demo6.getChildLeftBranchIds('1_1_1_1'))
/*
[]
*/使用场景 : 在级联下拉框中, 操作某一项时可以获取当前项的ID, 利用
getChildLeftBranchIds()方法可以快速获取后几级下拉框的默认渲染选项, 防止在无值时下拉框都是空白现象
TreeStore(data).getSiblingIds(String/null)
获取当前id的所有兄弟元素id(包括当前id本身)
- 没有参数id时,默认取数据的第一层所有id(多此一举,不建议调用此API传空值)
- 传入数组时,如遇id是空字符串,则直接返回空数组
var TreeStore = require('tree-store') ;
var demo7 = TreeStore(template_data)
console.log("demo7.getSiblingIds('1_1') : \n",demo7.getSiblingIds('1_1'))
// ["1_1","1_2"]
console.log("demo7.getSiblingIds() : \n",demo7.getSiblingIds())
// ["1", "2", "3"]使用场景 : 在下拉框中, 有默认值时, 利用
getSiblingIds()方法可以快速渲染出对应下拉框选项
API--之树形业务
为什么将下面两个API独立出来? 因为它是对已有的API进行再次封装,使树形业务场景中的数据操作更简便
示例数据--之树形业务
相比之 模板数据 , 示例数据 添加了一个checked属性, 但不要求你的数据源必须有此属性
window.template_data_tree = [
{
"id" : "1",
"text" : "text-1",
"child" : [
{
"id" : "1_1",
"text" : "text-1_1",
"checked":true,
"child" : [
{
"id" : "1_1_1",
"text" : "text-1_1_1",
"checked":true,
"child" : [
{
"id" : "1_1_1_1",
"text" : "text-1_1_1_1",
"checked":true,
},
{
"id" : "1_1_1_2",
"text" : "text-1_1_1_2",
"checked":true,
}
]
},
{
"id" : "1_1_2",
"text" : "text-1_1_2"
}
]
},
{
"id" : "1_2",
"text" : "text-1_2",
"child" : [
{
"id" : "1_2_1",
"text" : "text-1_2_1"
},
{
"id" : "1_2_2",
"text" : "text-1_2_2"
}
]
}
]
},
{
"id" : "2",
"text" : "text-2",
"child" : [
{
"id" : "2_1",
"text" : "text-2_1",
"checked":true,
"child" : []
},
{
"id" : "2_2",
"text" : "text-2_2",
"child" : []
},
]
},
{
"id" : "3",
"text" : "text-3",
"child" : []
}
]TreeStore(data).getChecked()
找出数据源中所有checked属性为true的id并返回 此API使用前提 : 数据中有checked属性 !!Q:(欲有isChecked初始值首次获取checkIds)
var TreeStore = require('tree-store') ;
var demo8 = TreeStore(template_data_tree).getChecked()
console.log("demo8 : \n",demo8)
// ["1_1","1_1_1","1_1_1_1","1_1_1_2","2_1"]TreeStore(data).changeChecked(Object)
改变任一id的选中状态,可以返回计算后的所有选中id
treeStore( data ).changeChecked( {
id : id,
isChecked : Boolean ,
checkedIds : [ id1 , id2 , ... ] ,
autoLink : {
parent : true,
child : true
}
} )| name | default | type | description |
|---|---|---|---|
| id | String | 当前操作的id | |
| isChecked | Boolean | 当前操作id的是否选中状态(change前一刻状态) | |
| checkedIds | Array | 当前已选中的所有ID | |
| autoLink | true | Object | 是否自动关联延伸到祖父元素和子孙元素 , 默认都关联 |
var TreeStore = require('tree-store') ;
var demo9 = TreeStore(template_data_tree).changeChecked({
id : '1_1_1',
isChecked : true,
checkedIds : [ '1' , '1_1' , '1_1_1' , '1_1_1_1' , '2' , '2_1' , '2_2' ],
autoLink : {
parent : false,
child : false
}
})
console.log("demo9 : \n",demo9)
/*
{
"change":{
"unchecked_ids":["1_1_1"],
"checked_ids":[]
},
"checked":["1" , "1_1" , "1_1_1_1" , "2" , "2_1" , "2_2"]
}
*/
var demo10 = TreeStore(template_data_tree).changeChecked({
id : '1_1_1',
isChecked : false,
checkedIds : [ '1' , '1_1' , '1_1_1' , '1_1_1_1' , '2' , '2_1' , '2_2' ]
})
console.log("demo10 : \n",demo10)
/*
{
"change":{
"unchecked_ids":[],
"checked_ids":["1","1_1","1_1_1","1_1_1_1","1_1_1_2"]
},
"checked":["1","1_1","1_1_1","1_1_1_1","1_1_1_2","2","2_1","2_2"]
}
*/API--之级联下拉框
为什么将以下API独立出来? 因为它是对已有的API进行再次封装,使在级联下拉框业务场景中的数据操作更简便
TreeStore(data).changeSelect(String)
根据传入的 id ,返回正确的选中id数组
var TreeStore = require('tree-store') ;
var demo11 = TreeStore(template_data).changeSelect('1_2')
console.log("demo11 : \n",demo11)
// ["1", "1_2", "1_2_1"]TreeStore(data).renderSelect(Object)
返回当前所有下拉框渲染的数据
TreeStore( data ).renderSelect( {
maxLength : Number,
minLength : Number,
checked : [ id1 , id2 , ... ] ,
filObj : {
id:'0',
text:'all'
}
} )| name | type | description |
|---|---|---|
| minLength | Number | 返回结果数组的最小长度(即 渲染的下拉框最少个数) , 此参数可省略 |
| maxLength | Number | 返回结果数组的最长长度(即 渲染的下拉框最多个数) , 此参数可省略 |
| checked | Array | 已选中的id ( 传入数组长度,需要与渲染的级联下拉框个数相同,没有默认值id时,请传空字符串,保证数组长度 ) |
| filObj | Object | 需要填充的数据 |
var TreeStore = require('tree-store') ;
var demo12 = TreeStore(template_data).renderSelect({
checked : ["1", "1_2", "1_2_1"] ,
})
console.log("demo12 : \n",demo12)
/*
[
[
{
"id" : "1",
"text" : "text-1",
"child" : [...] //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略
},
{
"id" : "2",
"text" : "text-2",
"child" : [...] //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略
},
{
"id" : "3",
"text" : "text-3",
"child" : []
}
],
[
{
"id" : "1_1",
"text" : "text-1_1",
"child" : [...] //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略
},
{
"id" : "1_2",
"text" : "text-1_2",
"child" : [...] //...是child中所有数据,为了更直观看到返回的数据结构,文档将其省略
}
],
[
{
"id" : "1_2_1",
"text" : "text-1_2_1"
},
{
"id" : "1_2_2",
"text" : "text-1_2_2"
}
]
]
*/
var demo13 = TreeStore(template_data).renderSelect({
checked : ["2", "2-1"] ,
minLength : 4 ,
filObj : {
id : '0' ,
text : 'all'
}
})
console.log("demo13 : \n",demo13)参与开发 - development
npm i -g fis3 --registry=https : //registry.npm.taobao.org
# 安装依赖
npm run dep
# 服务器
npm run s
# 开发
npm run dev
# 构建 gh-pages 版本 到 output/
npm run gh
# 将 output/** 发布到 gh-pages 分支
npm run gh-push
# 构建 npm 要发布的代码到 output/
npm run npmFor npm owner : npm publish Need to be in ./output