windy
5 years ago
3 changed files with 202 additions and 5 deletions
@ -0,0 +1,124 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/1/8 |
||||
* 提供节点滚动加载方式 |
||||
*/ |
||||
|
||||
!(function () { |
||||
BI.TreeRenderScrollService = BI.inherit(BI.OB, { |
||||
_init: function () { |
||||
this.nodeLists = {}; |
||||
|
||||
this.id = this.options.id; |
||||
// renderService是否已经注册了滚动
|
||||
this.hasBinded = false; |
||||
|
||||
this.container = this.options.container; |
||||
}, |
||||
|
||||
_getNodeListBounds: function (tId) { |
||||
var nodeList = this.options.subNodeListGetter(tId)[0]; |
||||
return { |
||||
top: nodeList.offsetTop, |
||||
left: nodeList.offsetLeft, |
||||
width: nodeList.offsetWidth, |
||||
height: nodeList.offsetHeight |
||||
} |
||||
}, |
||||
|
||||
_getTreeContainerBounds: function () { |
||||
var nodeList = this.container[0]; |
||||
if (BI.isNotNull(nodeList)) { |
||||
return { |
||||
top: nodeList.offsetTop + nodeList.scrollTop, |
||||
left: nodeList.offsetLeft + nodeList.scrollLeft, |
||||
width: nodeList.offsetWidth, |
||||
height: nodeList.offsetHeight |
||||
}; |
||||
} |
||||
return {}; |
||||
}, |
||||
|
||||
_canNodePopulate: function (tId) { |
||||
if (this.nodeLists[tId].locked) { |
||||
return false; |
||||
} |
||||
// 获取ul, 即子节点列表的bounds
|
||||
// 是否需要继续加载,只需要看子节点列表的下边界与container是否无交集
|
||||
var bounds = this._getNodeListBounds(tId); |
||||
var containerBounds = this._getTreeContainerBounds(tId); |
||||
// ul底部是不是漏出来了
|
||||
if (bounds.top + bounds.height < containerBounds.top + containerBounds.height) { |
||||
return true; |
||||
} |
||||
return false; |
||||
}, |
||||
|
||||
_isNodeInVisible: function (tId) { |
||||
var nodeList = this.options.subNodeListGetter(tId); |
||||
return nodeList.length === 0 || nodeList.css("display") === "none"; |
||||
}, |
||||
|
||||
pushNodeList: function (tId, populate) { |
||||
var self = this; |
||||
if (!BI.has(this.nodeLists, tId)) { |
||||
this.nodeLists[tId] = { |
||||
populate: BI.debounce(populate, 0), |
||||
options: { |
||||
times: 1 |
||||
}, |
||||
// 在上一次请求返回前, 通过滚动再次触发加载的时候, 不应该认为是下一次分页, 需要等待上次请求返回
|
||||
// 以保证顺序和请求次数的完整
|
||||
locked: false |
||||
}; |
||||
} else { |
||||
this.nodeLists[tId].locked = false; |
||||
} |
||||
if(!this.hasBinded) { |
||||
// console.log("绑定事件");
|
||||
this.hasBinded = true; |
||||
this.container && this.container.on("scroll", BI.debounce(function () { |
||||
self.refreshAllNodes(); |
||||
}, 30)); |
||||
} |
||||
}, |
||||
|
||||
refreshAllNodes: function () { |
||||
var self = this; |
||||
BI.each(this.nodeLists, function (tId) { |
||||
// 不展开的节点就不看了
|
||||
!self._isNodeInVisible(tId) && self.refreshNodes(tId); |
||||
}); |
||||
}, |
||||
|
||||
refreshNodes: function (tId) { |
||||
if (this._canNodePopulate(tId)) { |
||||
var nodeList = this.nodeLists[tId]; |
||||
nodeList.options.times++; |
||||
nodeList.locked = true; |
||||
nodeList.populate({ |
||||
times: nodeList.options.times |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
removeNodeList: function (tId) { |
||||
delete this.nodeLists[tId]; |
||||
if (BI.size(this.nodeLists) === 0) { |
||||
this.clear(); |
||||
} |
||||
}, |
||||
|
||||
clear: function () { |
||||
var self = this; |
||||
BI.each(this.nodeLists, function (tId) { |
||||
self.removeNodeList(tId); |
||||
}); |
||||
this.nodeLists = {}; |
||||
// console.log("解绑事件");
|
||||
this.container.off("scroll"); |
||||
this.hasBinded = false; |
||||
} |
||||
}); |
||||
})(); |
@ -0,0 +1,76 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/1/8 |
||||
* 提供节点分页加载方式 |
||||
*/ |
||||
|
||||
!(function () { |
||||
BI.TreeRenderPageService = BI.inherit(BI.OB, { |
||||
_init: function () { |
||||
this.nodeLists = {}; |
||||
}, |
||||
|
||||
_getLoadingBar: function(tId) { |
||||
var self = this; |
||||
var tip = BI.createWidget({ |
||||
type: "bi.loading_bar", |
||||
height: 25, |
||||
handler: function () { |
||||
self.refreshNodes(tId); |
||||
} |
||||
}); |
||||
tip.setLoaded(); |
||||
return tip; |
||||
}, |
||||
|
||||
pushNodeList: function (tId, populate) { |
||||
var self = this, o = this.options; |
||||
var tip = this._getLoadingBar(tId); |
||||
if (!BI.has(this.nodeLists, tId)) { |
||||
this.nodeLists[tId] = { |
||||
populate: BI.debounce(populate, 0), |
||||
options: { |
||||
times: 1 |
||||
}, |
||||
loadWidget: tip |
||||
}; |
||||
} else { |
||||
this.nodeLists[tId].loadWidget.destroy(); |
||||
this.nodeLists[tId].loadWidget = tip; |
||||
} |
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: o.subNodeListGetter(tId), |
||||
items: [tip] |
||||
}); |
||||
}, |
||||
|
||||
refreshNodes: function (tId) { |
||||
var nodeList = this.nodeLists[tId]; |
||||
nodeList.options.times++; |
||||
nodeList.loadWidget.setLoading(); |
||||
nodeList.populate({ |
||||
times: nodeList.options.times |
||||
}); |
||||
}, |
||||
|
||||
removeNodeList: function (tId) { |
||||
this.nodeLists[tId].loadWidget.destroy(); |
||||
this.nodeLists[tId].loadWidget = null; |
||||
delete this.nodeLists[tId]; |
||||
if (BI.size(this.nodeLists) === 0) { |
||||
this.clear(); |
||||
} |
||||
}, |
||||
|
||||
clear: function () { |
||||
var self = this; |
||||
BI.each(this.nodeLists, function (tId) { |
||||
self.removeNodeList(tId); |
||||
}); |
||||
this.nodeLists = {}; |
||||
} |
||||
}); |
||||
|
||||
})(); |
Loading…
Reference in new issue