util-helpers

树结构数据查询、过滤、转换等处理方法

Description:

树结构数据查询、过滤、转换等处理方法

Source:

index.js, line 120

Methods

(static) filterTree(tree, predicate, childrenFieldopt, nodeAssignopt) → {Array.<Object>}

Description:

过滤/筛选树节点。

如果某节点被过滤掉，它的子节点也一并抛弃。

Source:

filterTree.js, line 28

Since:

4.15.0

Example

const menus = [{ id: '1', name: '首页', code: 'trade', pid: null }, { id: '2', name: '交易管理', code: 'trade', pid: null, children: [{ id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}];

filterTree(menus, item=>item.name.indexOf('管理') > -1);
// [{ id: '2', name: '交易管理', code: 'trade', pid: null, children: [] }, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}]

// 如果某节点被过滤掉，它的子节点也一并抛弃
filterTree(menus, item=>item.id === '7');
// []

filterTree(menus, item=>item.id === 'not found');
// []

Parameters:

Name	Type	Attributes	Default	Description
`tree`	Array.<Object>			树结构数据
`predicate`	function			遍历每一项执行的函数，参数是当前遍历到的节点数据，如果返回 `Truthy` ，结果将包含该节点
`childrenField`	string	<optional>	`'children'`	子级字段名，默认`children`
`nodeAssign`	'spread' \| 'self'	<optional>	`'spread'`	节点赋值方式，默认`spread`。`spread`表示使用展开运算符创建新值，`self`-表示使用自身对象。

Returns:

Type: Array.<Object>

(static) findTreeNode(tree, predicate, childrenFieldopt) → {Object|undefined}

Description:

查找树结构数据节点

Source:

findTreeNode.js, line 23

Since:

4.14.0

Example

const menus = [{ id: '1', name: '首页', code: 'trade', pid: null }, { id: '2', name: '交易管理', code: 'trade', pid: null, children: [{ id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}];

findTreeNode(menus, item=>item.id === '2');
// {id: '2', name: '交易管理', code: 'trade', pid: null, children: [ { id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}

findTreeNode(menus, item=>item.id === '7');
// { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }

findTreeNode(menus, item=>item.id === 'not found');
// undefined

Parameters:

Name	Type	Attributes	Default	Description
`tree`	Array.<Object>			树结构数据
`predicate`	function			遍历每一项执行的函数，参数是当前遍历到的节点数据，如果返回 `Truthy` ，将返回该节点
`childrenField`	string	<optional>	`'children'`	子级字段名，默认`children`

Returns:

Type: Object | undefined

(static) findTreeNodes(tree, predicate, childrenFieldopt) → {Array.<Object>}

Description:

查找树结构数据多个节点

Source:

findTreeNodes.js, line 26

Since:

4.15.0

Example

const menus = [{ id: '1', name: '首页', code: 'trade', pid: null }, { id: '2', name: '交易管理', code: 'trade', pid: null, children: [{ id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}];

findTreeNodes(menus, item=>item.id === '2');
// [{id:'2',name:'交易管理',code:'trade',pid:null,children:[{id:'3',name:'交易查询',code:'trade-1',pid:'2',children:[{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'}]}]}]

findTreeNodes(menus, item=>item.name.indexOf('管理') > -1);
// [{id:'2',name:'交易管理',code:'trade',pid:null,children:[{id:'3',name:'交易查询',code:'trade-1',pid:'2',children:[{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'}]}]},{id:'5',name:'权限管理',code:'authorization',pid:null,children:[{id:'6',name:'角色管理',code:'authorization-1',pid:'5'},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'},{id:'6',name:'角色管理',code:'authorization-1',pid:'5'}]

findTreeNodes(menus, item=>item.id === '1' || item.id === '7');
// [{id:'1',name:'首页',code:'trade',pid:null},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]

findTreeNodes(menus, item=>item.id === 'not found');
// []

Parameters:

Name	Type	Attributes	Default	Description
`tree`	Array.<Object>			树结构数据
`predicate`	function			遍历每一项执行的函数，参数是当前遍历到的节点数据，如果返回 Truthy ，返回结果将包含该节点
`childrenField`	string	<optional>	`'children'`	子级字段名，默认`children`

Returns:

Type: Array.<Object>

(static) findTreeSelect(tree, predicate, childrenFieldopt) → {Array.<Object>}

Description:

查找包含当前节点的所有父级节点

Source:

findTreeSelect.js, line 58

Since:

4.14.0

Example

const menus = [{ id: '1', name: '首页', code: 'trade', pid: null }, { id: '2', name: '交易管理', code: 'trade', pid: null, children: [{ id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}];

findTreeSelect(menus, item => item.id === '2');
// [{id:'2',name:'交易管理',code:'trade',pid:null,children:[{id:'3',name:'交易查询',code:'trade-1',pid:'2',children:[{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'}]}]}]

findTreeSelect(menus, item => item.id === '7');
// [{id:'5',name:'权限管理',code:'authorization',pid:null,children:[{id:'6',name:'角色管理',code:'authorization-1',pid:'5'},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]

findTreeSelect(menus, item => item.id === 'not found');
// []

Parameters:

Name	Type	Attributes	Default	Description
`tree`	Array.<Object>			树结构数据
`predicate`	function			遍历每一项执行的函数，参数是当前遍历到的节点数据，如果返回 Truthy 将返回包含该节点的所有父级节点
`childrenField`	string	<optional>	`'children'`	子级字段名，默认`children`

Returns:

Type: Array.<Object>

(static) listToTree(list, optionsopt) → {Array.<Object>}

Description:

列表数据转树结构

Source:

listToTree.js, line 60

Since:

4.14.0

Example

const menus = [
  { id: '1', name: '首页', code: 'trade', pid: null },
  { id: '2', name: '交易管理', code: 'trade', pid: null },
  { id: '3', name: '交易查询', code: 'trade-1', pid: '2' },
  { id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' },
  { id: '5', name: '权限管理', code: 'authorization', pid: null },
  { id: '6', name: '角色管理', code: 'authorization-1', pid: '5' },
  { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }
];
listToTree(menus);
// [{id:'1',name:'首页',code:'trade',pid:null},{id:'2',name:'交易管理',code:'trade',pid:null,children:[{id:'3',name:'交易查询',code:'trade-1',pid:'2',children:[{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'}]}]},{id:'5',name:'权限管理',code:'authorization',pid:null,children:[{id:'6',name:'角色管理',code:'authorization-1',pid:'5'},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]}]

// 自定义子级字段名
listToTree(basicMenus, { childrenField: 'childs' });
// [{id:'1',name:'首页',code:'trade',pid:null},{id:'2',name:'交易管理',code:'trade',pid:null,childs:[{id:'3',name:'交易查询',code:'trade-1',pid:'2',childs:[{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'}]}]},{id:'5',name:'权限管理',code:'authorization',pid:null,childs:[{id:'6',name:'角色管理',code:'authorization-1',pid:'5'},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]}]

Parameters:

Name Type Attributes Description

list

Array.<Object>

列表数据

options

Object

配置项

Properties

Name	Type	Attributes	Default	Description
`keyField`	string	<optional>	`'id'`	当前数据的键值字段名称，默认`id`
`parentField`	string	<optional>	`'pid'`	当前数据的父级字段名称，默认`pid`
`childrenField`	string	<optional>	`'children'`	子级字段名称，默认`children`
`emptyChildrenValue`	'none' \| 'null' \| 'array'	<optional>	`'none'`	子级为空时的值，默认`none`。`none`表示删除该子级，`null`表示为`null`，`array`表示为`[]`。
`nodeAssign`	'spread' \| 'self'	<optional>	`'spread'`	节点赋值方式，默认`spread`。`spread`表示使用展开运算符创建新值，`self`表示使用自身对象。

Returns:

树结构

Type: Array.<Object>

(static) transformFieldNames(data, fieldNames, childrenFieldopt, nodeAssignopt) → {Array.<Object>}

Description:

转换字段名，返回一个转换字段后的值，不改变原值。

Source:

transformFieldNames.js, line 32

Since:

4.14.0

Example

const options = [{code: '1', name: 'one'},{code:'2', name:'two'}];
const newOptions = transformFieldNames(options, {label: 'name', value: 'code'});
// [{value: '1', label: 'one'},{value:'2', label:'two'}]

// 嵌套数据，指定子级字段名 children
const options2 = [{code: '1', name: 'one'},{code:'2', name:'two', children: [{code:'2-1', name:'two-one', children: [{code: '2-1-1', name:'two-one-one'}]}]}];
const newOptions2 = transformFieldNames(options2, {label: 'name', value: 'code'}, 'children');
// [{value: '1', label: 'one'},{value:'2', label:'two', children: [{value: '2-1', label:'two-one', children: [{value: '2-1-1', label:'two-one-one'}]}]}]

const options3 = [{code: '1', name: 'one'},{code:'2', name:'two', childs: [{code:'2-1', name:'two-one'}]}];
const newOptions3 = transformFieldNames(options3, {label: 'name', value: 'code'}, 'childs');
// [{value: '1', label: 'one'},{value:'2', label:'two', childs: [{value: '2-1', label:'two-one'}]}]

// 嵌套数据，并替换子集字段名
const newOptions4 = transformFieldNames(options3, {label: 'name', value: 'code', children: 'childs'}, 'childs');
// [{value: '1', label: 'one'},{value:'2', label:'two', children: [{value: '2-1', label:'two-one'}]}]

Parameters:

Name	Type	Attributes	Default	Description
`data`	Array.<Object>			对象数组。如果是树结构数据，需要指定第三个参数 childrenField
`fieldNames`	Object			字段名映射
`childrenField`	string	<optional>		子级数据字段名
`nodeAssign`	'spread' \| 'self'	<optional>	`'spread'`	节点赋值方式，默认`spread`。`spread`表示使用展开运算符创建新值，`self`表示使用自身对象。

Returns:

Type: Array.<Object>

(static) treeToList(tree, childrenField) → {Array.<Object>}

Description:

树结构转列表数据

Source:

treeToList.js, line 16

Since:

4.14.0

Example

const menus = [{ id: '1', name: '首页', code: 'trade', pid: null }, { id: '2', name: '交易管理', code: 'trade', pid: null, children: [{ id: '3', name: '交易查询', code: 'trade-1', pid: '2', children: [{ id: '4', name: '交易查询-查询操作', code: 'trade-1-1', pid: '3' }]}]}, { id: '5', name: '权限管理', code: 'authorization', pid: null, children: [{ id: '6', name: '角色管理', code: 'authorization-1', pid: '5' }, { id: '7', name: '用户管理', code: 'authorization-2', pid: '5' }]}];

treeToList(menus, 'children'));
// [{id:'1',name:'首页',code:'trade',pid:null},{id:'2',name:'交易管理',code:'trade',pid:null},{id:'3',name:'交易查询',code:'trade-1',pid:'2'},{id:'4',name:'交易查询-查询操作',code:'trade-1-1',pid:'3'},{id:'5',name:'权限管理',code:'authorization',pid:null},{id:'6',name:'角色管理',code:'authorization-1',pid:'5'},{id:'7',name:'用户管理',code:'authorization-2',pid:'5'}]

Parameters:

Name	Type	Description
`tree`	Array.<Object>	树结构数据
`childrenField`	string	子级字段名称

Returns:

列表数据

Type: Array.<Object>