1.0.2 • Published 12 months ago
@xtree/data-source v1.0.2
@xtree/data-source
JS 中常用语如组件 DataSource 的树状结构数组的常用处理方法。如添加、删除子树,查找、遍历。
安装
$ npm i @xtree/data-source --save
示例
import DataSource from '@xtree/data-source';
const ds = new DataSource();
ds.parse([
{
value: '1',
chilren: [
{
value: '1-1',
},
],
},
]);
也可自定义传入树形结构的数据类型
interface DataItem {
id: string;
name: string;
employees?: DataItem[];
}
const ds = new DataSource<DataItem>({
valuePropName: 'id',
childrenPropName: 'employees',
});
ds.parse([
{
id: '1',
name: '张三',
employees: [
{
id: '2',
name: '李四',
},
],
},
]);
使用
推荐(默认支持)的数据格式:
type DataItem = {
// 节点值,推荐使用 string/number 并且需要保持在树中值唯一
value: any;
children?: DataItem[];
// 其他
[key: string]: any;
};
方法
constructor(options);
初始化 DataSource 对象
import DataSource from './data-source';
interface DataItem {
label: string;
value: string;
children?: DataItem[];
}
// 指定节点的 值 和 孩子 的属性名
const ds = new DataSource<DataItem>({
valuePropName: 'value',
childrenPropName: 'children',
});
parse(data) 解析数据
解析树形结构数据,此操作会清空原有的所有数据
const data: DataItem[] = [
{
label: '浙江省',
value: '33',
childen: [
{
label: '杭州市',
value: '3301',
},
//...
],
},
];
ds.parse(data);
get size()
返回当前的总节点数
console.log(ds.size);
get isEmpty()
判断当前的总结点数是否为 0
console.log(ds.isEmpty); // boolean;
find(value
) 查找指定值的数据
查找并返回第一个当前实例化 DataSource
对象中指定值的节点数据,如果没有,则返回 undefined
;
value 可为函数类型 (data:T)=>boolean
ds.find('33'); // {label:'浙江省', value:'33', children:[...]}
ds.find((data) => data.value === '33');
filter(predicate: (data:T, depth:number)=>boolean)
根据条件超找并过滤所有符合条件的数据
// 过滤所有深度为 1 的节点
ds.filter((data, depth) => {
return depth === 1;
});
traverse(callback
: (node, depth, cancel)=>void
)
遍历所有节点,并执行回调.
ds.traverse((data, depth, cancel) => {
// 根据适当条件可结束遍历
if (condition) {
cancel();
}
});
depth(value: any
)
返回 value 所在节点的深度
children(value?: any)
返回 value 对应节点的孩子节点,未传入 value 则返回树的第一层节点。
parents(value)
返回 value 所在节点的父级节点的路径数组(由近及远)
siblings(value, pos:'left'|'right'|'all'
)
返回值为 value
的节点的兄弟节点数据,可单独指定做 左/右兄弟节点
insertChild(data, parentValue: any
, pos: 'leading'|'trailing'
)
在指定的 parentValue
对应的节点的孩子节点上插入 data
。 位置可选, leading
- 头,trailing
- 尾(默认)
insertBefore(data, parentValue)
在指定的 parentValue
对应节点前插入 data
insertAfter(data, parentValue)
在指定的 parentValue
对应节点后插入 data
remove(value)
移除 value
对应的节点
clear()
清空当前 DataSource 实例的所有节点数据
toData()
返回当前 DataSource 实例的最新树状结构数据
ds.toData(); //
flatten(parentValue)
返回当前 DataSource 实例对应的树状数据的扁平化数据
// 前述实例,扁平化后为
ds.flatten('pValue'); // [{label:'浙江省', value:'33', pValue: undefined}, {label:'杭州市', value:'3301', pValue:'33'}, ... ]
其他
几个约定
value
是 全局唯一的, 否则在遍历,查找等场景可能返回结果异常value
推荐使用string
或number
类型
1.0.2
12 months ago
1.0.1
12 months ago
1.0.0
12 months ago
1.0.0-beta.6
12 months ago
1.0.0-beta.2
12 months ago
1.0.0-beta.3
12 months ago
1.0.0-beta.4
12 months ago
1.0.0-beta.5
12 months ago
1.0.0-beta.1
12 months ago
0.1.0-beta.1
1 year ago