innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

解决数据量少时，出现滚动条的问题

This commit is contained in:
yangchch6 2019-08-28 10:19:05 +08:00
parent 8524f03c82
commit 2b9457cb17
11 changed files with 66 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/Tree.js
View File

@ -1164,6 +1164,9 @@ var _initialiseProps = function _initialiseProps() {
this.getSumHeight = function (start, end) {
var sumHeight = 0;
if (start > end) {
return sumHeight;
}
var span = Math.abs(end - start);
if (span) {
sumHeight = span * _config2["default"].defaultHeight;

1
build/infiniteScroll.js
View File

@ -131,6 +131,7 @@ var InfiniteScroll = function (_Component) {
// "**endIndex**" + endIndex
// );
newTreeList = _this.treeList.slice(startIndex, endIndex);
// console.log(JSON.stringify(newTreeList))
_this.props.handleTreeListChange && _this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
};

17
build/util.js
View File

@ -390,10 +390,12 @@ function warnOnlyTreeNode() {
};
*/
function convertListToTree(treeData, attr, flatTreeKeysMap) {
var tree = [];
var tree = []; //存储所有一级节点
var resData = treeData,
resKeysMap = {},
treeKeysMap = {};
//resData 存储截取的节点 + 父节点（除一级节点外）
resKeysMap = {},
//resData 的Map映射
treeKeysMap = {}; //tree 的Map映射
resData.map(function (element) {
var key = attr.id;
resKeysMap[element[key]] = element;
@ -416,21 +418,20 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
title = node.title,
children = node.children,
isLeaf = node.isLeaf,
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', 'isLeaf']),
obj = {
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', 'isLeaf']);
var obj = {
key: key,
title: title,
isLeaf: isLeaf,
children: []
};
tree.push(_extends(obj, _extends({}, otherProps)));
treeKeysMap[key] = node;
return node;
}
}
};
// 遍历 resData ，找到所有的一级节点
for (var i = 0; i < resData.length; i++) {
var item = resData[i];
if (item[attr.parendId] === attr.rootId) {

2
demo/index-demo-base.js
View File

@ -68,7 +68,7 @@ class DemoGroup extends Component {
render () {
return (
<Row>
{DemoArray.map((child,index) => {
{[DemoArray[12]].map((child,index) => {
return (
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>

2
demo/index.js
View File

@ -69,7 +69,7 @@ class DemoGroup extends Component {
render () {
return (
<Row>
{DemoArray.map((child,index) => {
{[DemoArray[12]].map((child,index) => {
return (
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>

41
dist/demo.js vendored
View File

@ -197,7 +197,7 @@
return _react2['default'].createElement(
_beeLayout.Row,
null,
DemoArray.map(function (child, index) {
[DemoArray[12]].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,6 +34446,7 @@
//启用懒加载，把 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);
@ -35314,6 +35315,10 @@
sufHeight = 0,
treeNode = [],
treeChildren = props.children; //最终渲染在 Tree 标签中的子节点
// console.log(
// "**startIndex**" + startIndex,
// "**endIndex**" + endIndex
// );
if (lazyLoad) {
preHeight = this.getSumHeight(0, startIndex);
@ -35435,7 +35440,10 @@
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;
@ -35510,6 +35518,9 @@
this.getSumHeight = function (start, end) {
var sumHeight = 0;
if (start > end) {
return sumHeight;
}
var span = Math.abs(end - start);
if (span) {
sumHeight = span * _config2['default'].defaultHeight;
@ -36572,10 +36583,12 @@
};
*/
function convertListToTree(treeData, attr, flatTreeKeysMap) {
var tree = [];
var tree = []; //存储所有一级节点
var resData = treeData,
resKeysMap = {},
treeKeysMap = {};
//resData 存储截取的节点 + 父节点（除一级节点外）
resKeysMap = {},
//resData 的Map映射
treeKeysMap = {}; //tree 的Map映射
resData.map(function (element) {
var key = attr.id;
resKeysMap[element[key]] = element;
@ -36584,32 +36597,34 @@
var findParentNode = function findParentNode(node) {
var parentKey = node[attr.parendId];
if (parentKey !== attr.rootId) {
//如果不是根节点，则继续递归
var item = flatTreeKeysMap[parentKey];
// 用 resKeysMap 判断，避免重复计算某节点的父节点
if (resKeysMap.hasOwnProperty(item[attr.id])) return;
resData.push(item);
resKeysMap[item[attr.id]] = item;
findParentNode(item);
} else {
// 用 treeKeysMap 判断，避免重复累加
if (!treeKeysMap.hasOwnProperty(node[attr.id])) {
var key = node.key,
title = node.title,
children = node.children,
isLeaf = node.isLeaf,
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', 'isLeaf']),
obj = {
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', 'isLeaf']);
var obj = {
key: key,
title: title,
isLeaf: isLeaf,
children: []
};
tree.push(_extends(obj, _extends({}, otherProps)));
treeKeysMap[key] = node;
return node;
}
}
};
// 遍历 resData ，找到所有的一级节点
for (var i = 0; i < resData.length; i++) {
var item = resData[i];
if (item[attr.parendId] === attr.rootId) {
@ -36629,9 +36644,8 @@
treeKeysMap[key] = item;
resData.splice(i, 1);
i--;
} else {
//找到根节点信息
findParentNode(item);
} else {//递归查找根节点信息
// findParentNode(item);
}
}
// console.log('tree',tree);
@ -36862,6 +36876,7 @@
// "**endIndex**" + endIndex
// );
newTreeList = _this.treeList.slice(startIndex, endIndex);
// console.log(JSON.stringify(newTreeList))
_this.props.handleTreeListChange && _this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
};

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-tree",
"version": "2.1.1",
"version": "2.1.2-beta.1",
"description": "Tree ui component for react",
"keywords": [
"react",

13
src/Tree.js
View File

@ -57,6 +57,7 @@ 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);
@ -797,7 +798,10 @@ 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;
@ -877,6 +881,9 @@ onExpand(treeNode,keyType) {
*/
getSumHeight = (start, end) => {
let sumHeight = 0;
if(start > end) {
return sumHeight;
}
let span = Math.abs(end - start);
if(span) {
sumHeight = span * CONFIG.defaultHeight;
@ -977,6 +984,10 @@ 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);

1
src/infiniteScroll.js
View File

@ -254,6 +254,7 @@ export default class InfiniteScroll extends Component {
// "**endIndex**" + endIndex
// );
newTreeList = this.treeList.slice(startIndex,endIndex);
// console.log(JSON.stringify(newTreeList))
this.props.handleTreeListChange && this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
}

17
src/util.js
View File

@ -337,10 +337,10 @@ export function warnOnlyTreeNode() {
};
*/
export function convertListToTree(treeData, attr, flatTreeKeysMap) {
let tree = [];
let resData = treeData,
resKeysMap = {},
treeKeysMap = {};
let tree = []; //存储所有一级节点
let resData = treeData, //resData 存储截取的节点 + 父节点（除一级节点外）
resKeysMap = {}, //resData 的Map映射
treeKeysMap = {}; //tree 的Map映射
resData.map((element) => {
let key = attr.id;
  resKeysMap[element[key]] = element;
@ -358,8 +358,8 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
}else{
// 用 treeKeysMap 判断，避免重复累加
if (!treeKeysMap.hasOwnProperty(node[attr.id]) ) {
let { key, title, children, isLeaf, ...otherProps } = node,
obj = {
let { key, title, children, isLeaf, ...otherProps } = node;
let obj = {
key,
title,
isLeaf,
@ -367,11 +367,10 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
}
tree.push(Object.assign(obj, {...otherProps}));
treeKeysMap[key] = node;
return node;
}
}
}
// 遍历 resData ，找到所有的一级节点
for (let i = 0; i < resData.length; i++) {
let item = resData[i];
if (item[attr.parendId] === attr.rootId) { //如果是根节点，就存放进 tree 对象中
@ -387,7 +386,7 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
resData.splice(i, 1);
i--;
}else { //递归查找根节点信息
findParentNode(item);
// findParentNode(item);
}
}
// console.log('tree',tree);