fix:动态补全父节点时，顺序不对的问题
This commit is contained in:
yangchch6
parent
2b9457cb17
commit
039c90e505
|
|
@ -1092,7 +1092,6 @@ var _initialiseProps = function _initialiseProps() {
|
|||
|
||||
_this7.startIndex = typeof startIndex !== "undefined" ? startIndex : _this7.startIndex;
|
||||
_this7.endIndex = typeof endIndex !== "undefined" ? endIndex : _this7.endIndex;
|
||||
|
||||
_this7.setState({
|
||||
treeData: treeData
|
||||
});
|
||||
|
|
|
|||
|
|
@ -381,13 +381,6 @@ function warnOnlyTreeNode() {
|
|||
* @param {*} treeData 扁平结构的 List 数组
|
||||
* @param {*} attr 属性配置设置
|
||||
* @param {*} flatTreeKeysMap 存储所有 key-value 的映射，方便获取各节点信息
|
||||
* let attr = {
|
||||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
name: 'title',
|
||||
rootId: null,
|
||||
isLeaf: 'isLeaf'
|
||||
};
|
||||
*/
|
||||
function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
||||
var tree = []; //存储所有一级节点
|
||||
|
|
@ -408,7 +401,7 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
var item = flatTreeKeysMap[parentKey];
|
||||
// 用 resKeysMap 判断，避免重复计算某节点的父节点
|
||||
if (resKeysMap.hasOwnProperty(item[attr.id])) return;
|
||||
resData.push(item);
|
||||
resData.unshift(item);
|
||||
resKeysMap[item[attr.id]] = item;
|
||||
findParentNode(item);
|
||||
} else {
|
||||
|
|
@ -434,7 +427,7 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
// 遍历 resData ，找到所有的一级节点
|
||||
for (var i = 0; i < resData.length; i++) {
|
||||
var item = resData[i];
|
||||
if (item[attr.parendId] === attr.rootId) {
|
||||
if (item[attr.parendId] === attr.rootId && !treeKeysMap.hasOwnProperty(item[attr.id])) {
|
||||
//如果是根节点，就存放进 tree 对象中
|
||||
var key = item.key,
|
||||
title = item.title,
|
||||
|
|
@ -456,7 +449,7 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
findParentNode(item);
|
||||
}
|
||||
}
|
||||
// console.log('tree',tree);
|
||||
// console.log('resData',resKeysMap);
|
||||
var run = function run(treeArrs) {
|
||||
if (resData.length > 0) {
|
||||
for (var _i2 = 0; _i2 < treeArrs.length; _i2++) {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class DemoGroup extends Component {
|
|||
render () {
|
||||
return (
|
||||
<Row>
|
||||
{[DemoArray[12]].map((child,index) => {
|
||||
{DemoArray.map((child,index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ class DemoGroup extends Component {
|
|||
render () {
|
||||
return (
|
||||
<Row>
|
||||
{[DemoArray[12]].map((child,index) => {
|
||||
{DemoArray.map((child,index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
return _react2['default'].createElement(
|
||||
_beeLayout.Row,
|
||||
null,
|
||||
[DemoArray[12]].map(function (child, index) {
|
||||
DemoArray.map(function (child, index) {
|
||||
|
||||
return _react2['default'].createElement(Demo, { example: child.example, title: child.title, code: child.code, scss_code: child.scss_code, desc: child.desc, key: index });
|
||||
})
|
||||
|
|
@ -34446,7 +34446,6 @@
|
|||
//启用懒加载，把 Tree 结构拍平，为后续动态截取数据做准备
|
||||
if (lazyLoad) {
|
||||
var flatTreeData = this.deepTraversal(treeData);
|
||||
// console.log(JSON.stringify(flatTreeData))
|
||||
flatTreeData.forEach(function (element) {
|
||||
if (sliceTreeList.length >= _this2.loadCount) return;
|
||||
sliceTreeList.push(element);
|
||||
|
|
@ -35315,10 +35314,6 @@
|
|||
sufHeight = 0,
|
||||
treeNode = [],
|
||||
treeChildren = props.children; //最终渲染在 Tree 标签中的子节点
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
|
||||
if (lazyLoad) {
|
||||
preHeight = this.getSumHeight(0, startIndex);
|
||||
|
|
@ -35440,13 +35435,9 @@
|
|||
isLeaf: 'isLeaf'
|
||||
};
|
||||
var treeData = (0, _util.convertListToTree)(treeList, attr, _this7.flatTreeKeysMap);
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
|
||||
_this7.startIndex = typeof startIndex !== "undefined" ? startIndex : _this7.startIndex;
|
||||
_this7.endIndex = typeof endIndex !== "undefined" ? endIndex : _this7.endIndex;
|
||||
|
||||
_this7.setState({
|
||||
treeData: treeData
|
||||
});
|
||||
|
|
@ -36574,13 +36565,6 @@
|
|||
* @param {*} treeData 扁平结构的 List 数组
|
||||
* @param {*} attr 属性配置设置
|
||||
* @param {*} flatTreeKeysMap 存储所有 key-value 的映射，方便获取各节点信息
|
||||
* let attr = {
|
||||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
name: 'title',
|
||||
rootId: null,
|
||||
isLeaf: 'isLeaf'
|
||||
};
|
||||
*/
|
||||
function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
||||
var tree = []; //存储所有一级节点
|
||||
|
|
@ -36601,7 +36585,7 @@
|
|||
var item = flatTreeKeysMap[parentKey];
|
||||
// 用 resKeysMap 判断，避免重复计算某节点的父节点
|
||||
if (resKeysMap.hasOwnProperty(item[attr.id])) return;
|
||||
resData.push(item);
|
||||
resData.unshift(item);
|
||||
resKeysMap[item[attr.id]] = item;
|
||||
findParentNode(item);
|
||||
} else {
|
||||
|
|
@ -36627,7 +36611,7 @@
|
|||
// 遍历 resData ，找到所有的一级节点
|
||||
for (var i = 0; i < resData.length; i++) {
|
||||
var item = resData[i];
|
||||
if (item[attr.parendId] === attr.rootId) {
|
||||
if (item[attr.parendId] === attr.rootId && !treeKeysMap.hasOwnProperty(item[attr.id])) {
|
||||
//如果是根节点，就存放进 tree 对象中
|
||||
var key = item.key,
|
||||
title = item.title,
|
||||
|
|
@ -36644,11 +36628,12 @@
|
|||
treeKeysMap[key] = item;
|
||||
resData.splice(i, 1);
|
||||
i--;
|
||||
} else {//递归查找根节点信息
|
||||
// findParentNode(item);
|
||||
} else {
|
||||
//递归查找根节点信息
|
||||
findParentNode(item);
|
||||
}
|
||||
}
|
||||
// console.log('tree',tree);
|
||||
// console.log('resData',resKeysMap);
|
||||
var run = function run(treeArrs) {
|
||||
if (resData.length > 0) {
|
||||
for (var _i2 = 0; _i2 < treeArrs.length; _i2++) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
13
docs/api.md
13
docs/api.md
|
|
@ -37,10 +37,17 @@ import 'bee-tree/build/Tree.css';
|
|||
|showLine|是否显示连接线|bool|false
|
||||
|openIcon|自定义展开节点图标的名称[参考这里](http://bee.tinper.org/tinper-bee/bee-icon)String[]|-
|
||||
|closeIcon|自定义关闭节点图标的名称[参考这里](http://bee.tinper.org/tinper-bee/bee-icon)String[]|-
|
||||
<<<<<<< HEAD
|
||||
|onExpand|展开/收起节点时触发的回调函数|function(expandedKeys, {expanded: bool, node})|-
|
||||
|onCheck|点击复选框触发的回调方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|-
|
||||
|onSelect|点击树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|-
|
||||
|filterTreeNode|按需筛选树节点（高亮）,当返回true,相关联的节点会高亮|function(node)|-
|
||||
=======
|
||||
|onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-
|
||||
|onCheck|当用户点击复选框checkbox触发的回调方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|-
|
||||
|onSelect|当用户选择树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|-
|
||||
|filterTreeNode|过滤树节点的方法（highlight）,当返回true,相关联的节点会高亮|function(node)|-
|
||||
>>>>>>> master
|
||||
|loadData|异步加载数据|function(node)|-
|
||||
|onRightClick|当用户点击右键触发的回调函数|function({event,node})|-
|
||||
|draggable|树是否可拖拽（IE>8| bool|false
|
||||
|
|
@ -55,6 +62,11 @@ import 'bee-tree/build/Tree.css';
|
|||
|tabIndexValue|节点获取焦点时，自定义tabIndex的值|Number|0
|
||||
|Children|必填，TreeNode组件|node|-
|
||||
|mustExpandable|支持disabled的节点可以自定义展开收起，默认disabled的节点不可以展开收起|bool|false
|
||||
<<<<<<< HEAD
|
||||
|treeData|treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）|array\<{key, title, children, [disabled, selectable]}>|-
|
||||
|lazyLoad|是否使用懒加载（适用于大数据场景），[如何使用](http://bee.tinper.org/tinper-bee/bee-tree#%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%A0%91%E8%8A%82%E7%82%B9)|bool|false
|
||||
|renderTitle|使用 treeData 渲染树时使用，可通过此函数自定义树节点内容|Function(item)|-
|
||||
=======
|
||||
|autoSelectWhenFocus|使用“↑、↓”快捷键切换焦点时，是否自动选中树节点|bool|false
|
||||
|treeData|treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）|array\<{key, title, children, [disabled, selectable]}>|-
|
||||
|lazyLoad|是否使用懒加载（适用于大数据场景），[如何使用](http://bee.tinper.org/tinper-bee/bee-tree#%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%A0%91%E8%8A%82%E7%82%B9)|bool|false
|
||||
|
|
@ -62,6 +74,7 @@ import 'bee-tree/build/Tree.css';
|
|||
|renderTreeNodes|使用 treeData 渲染树节点时，可使用该函数自定义节点显示内容（非必须）|Function(data)|-
|
||||
|getScrollContainer|用于滚动加载场景，自定义滚动事件监听的容器|Function(data)|-
|
||||
|
||||
>>>>>>> master
|
||||
|
||||
### TreeNode
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -66,4 +66,4 @@
|
|||
"react-addons-test-utils": "15.6.2",
|
||||
"react-dom": "16.8.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
src/Tree.js
11
src/Tree.js
|
|
@ -57,7 +57,6 @@ class Tree extends React.Component {
|
|||
//启用懒加载，把 Tree 结构拍平，为后续动态截取数据做准备
|
||||
if(lazyLoad) {
|
||||
let flatTreeData = this.deepTraversal(treeData);
|
||||
// console.log(JSON.stringify(flatTreeData))
|
||||
flatTreeData.forEach((element) => {
|
||||
if(sliceTreeList.length >= this.loadCount) return;
|
||||
sliceTreeList.push(element);
|
||||
|
|
@ -798,13 +797,9 @@ onExpand(treeNode,keyType) {
|
|||
isLeaf: 'isLeaf'
|
||||
};
|
||||
let treeData = convertListToTree(treeList, attr, this.flatTreeKeysMap);
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
|
||||
this.startIndex = typeof(startIndex) !== "undefined" ? startIndex : this.startIndex;
|
||||
this.endIndex = typeof(endIndex) !== "undefined" ? endIndex : this.endIndex;
|
||||
|
||||
this.setState({
|
||||
treeData : treeData
|
||||
})
|
||||
|
|
@ -984,10 +979,6 @@ onExpand(treeNode,keyType) {
|
|||
sufHeight = 0, //后置占位高度
|
||||
treeNode = [], //根据传入的 treeData 生成的 treeNode 节点数组
|
||||
treeChildren = props.children; //最终渲染在 Tree 标签中的子节点
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
if(lazyLoad){
|
||||
preHeight = this.getSumHeight(0, startIndex);
|
||||
sufHeight = this.getSumHeight(endIndex, flatTreeData.length);
|
||||
|
|
|
|||
21
src/util.js
21
src/util.js
|
|
@ -328,23 +328,16 @@ export function warnOnlyTreeNode() {
|
|||
* @param {*} treeData 扁平结构的 List 数组
|
||||
* @param {*} attr 属性配置设置
|
||||
* @param {*} flatTreeKeysMap 存储所有 key-value 的映射，方便获取各节点信息
|
||||
* let attr = {
|
||||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
name: 'title',
|
||||
rootId: null,
|
||||
isLeaf: 'isLeaf'
|
||||
};
|
||||
*/
|
||||
export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
||||
let tree = []; //存储所有一级节点
|
||||
let tree = []; //存储所有一级节点
|
||||
let resData = treeData, //resData 存储截取的节点 + 父节点（除一级节点外）
|
||||
resKeysMap = {}, //resData 的Map映射
|
||||
treeKeysMap = {}; //tree 的Map映射
|
||||
resData.map((element) => {
|
||||
let key = attr.id;
|
||||
resKeysMap[element[key]] = element;
|
||||
});
|
||||
resKeysMap[element[key]] = element;
|
||||
});
|
||||
// 查找父节点，为了补充不完整的数据结构
|
||||
let findParentNode = (node) => {
|
||||
let parentKey = node[attr.parendId];
|
||||
|
|
@ -352,7 +345,7 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
let item = flatTreeKeysMap[parentKey];
|
||||
// 用 resKeysMap 判断，避免重复计算某节点的父节点
|
||||
if(resKeysMap.hasOwnProperty(item[attr.id])) return;
|
||||
resData.push(item);
|
||||
resData.unshift(item);
|
||||
resKeysMap[item[attr.id]] = item;
|
||||
findParentNode(item);
|
||||
}else{
|
||||
|
|
@ -373,7 +366,7 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
// 遍历 resData ，找到所有的一级节点
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
let item = resData[i];
|
||||
if (item[attr.parendId] === attr.rootId) { //如果是根节点，就存放进 tree 对象中
|
||||
if (item[attr.parendId] === attr.rootId && !treeKeysMap.hasOwnProperty(item[attr.id])) { //如果是根节点，就存放进 tree 对象中
|
||||
let { key, title, children, ...otherProps } = item;
|
||||
let obj = {
|
||||
key: item[attr.id],
|
||||
|
|
@ -386,10 +379,10 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
resData.splice(i, 1);
|
||||
i--;
|
||||
}else { //递归查找根节点信息
|
||||
// findParentNode(item);
|
||||
findParentNode(item);
|
||||
}
|
||||
}
|
||||
// console.log('tree',tree);
|
||||
// console.log('resData',resKeysMap);
|
||||
var run = function(treeArrs) {
|
||||
if (resData.length > 0) {
|
||||
for (let i = 0; i < treeArrs.length; i++) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue