我正在从头开始构建数据网格。我知道有非常好的解决方案。
我必须特别关注网格的性能。我将有最多5000行(与行跨度,列跨度和内联编辑)
我有一个真正给我留下深刻印象的功能,那就是在网格中实现的虚拟渲染,比如SlickGrid和DataTables。
我想知道是否有人可以给我一个关于如何使用Jquery / javascript实现虚拟渲染的见解。
谢谢
发布于 2018-05-31 08:49:34
我有一个非常好的使用react的示例,代码非常小,您可以使用Jquery来更新Dom。
const data = []
function createData(){
for (let i=0;i<1000000;i++){
data.push({name: `Row ${i}`});
}
}
createData();
//Item class to render each of the list rows
class Item extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div className="item" style={{top:this.props.top,height:this.props.itemheight}}>
{this.props.label}
</div>)
}
}
//The list component that contains the rows and manage the virtual rendering
// using the vertical scroll position
class Vlist extends React.Component{
constructor(props){
super(props);
this.numVisibleItems=Math.trunc(300 / this.props.itemheight);
this.state={
start:0,
end:this.numVisibleItems
}
this.containerStyle={height:data.length * this.props.itemheight}
this.scollPos=this.scollPos.bind(this)
}
scollPos(){
let currentIndx=Math.trunc(this.refs.viewPort.scrollTop/this.props.itemheight)
currentIndx=currentIndx-this.numVisibleItems>=data.length?currentIndx-this.numVisibleItems:currentIndx;
if (currentIndx!==this.state.start){
console.log("Redraw");
this.setState(
this.state={
start:currentIndx,
end:currentIndx+this.numVisibleItems>=data.length ? data.length-1:currentIndx+this.numVisibleItems
}
)
}
}
renderRows(){
let result=[];
for (let i=this.state.start;i<=this.state.end;i++){
let item=data[i];
result.push(<Item key={i} label={item.name} top={i*this.props.itemheight} itemheight={this.props.itemheight} />);
}
return result;
}
render(){
return (
<div ref="viewPort" className="viewPort" onScroll={this.scollPos} >
<div className="itemContainer" style={this.containerStyle}>
{this.renderRows()}
</div>
</div>)
}
}
ReactDOM.render(<Vlist itemheight={30} />, document.querySelector("#app"))
.viewPort {
position: relative;
width: 510px;
height: 300px;
border: solid 1px;
overflow-y: scroll;
}
.itemContainer {
position: absolute;
width: 500px;
background-color: azure;
}
.item {
position: absolute;
background-color: beige;
border: solid 1px;
width: 500px;
text-align: center;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
https://stackoverflow.com/questions/20387863
复制相似问题