1

我正在尝试在我的react-data-grid中实现固定列。我通过添加来遵循示例locked: true，但它不起作用，因此我也尝试使用呈现的自定义行，就像另一个示例一样。

我得到_this.refs[i].setScrollLeft is not a function错误。尝试对同一问题的 hacky 评论对我也不起作用（抱歉，没有足够的代表发表评论！）。

我还尝试创建一个自定义单元格渲染类，但仍然没有运气。我也尝试使用refs回调方式：

class CellRenderer extends React.Component {    
  render() {
    return <ReactDataGrid.Cell {...this.props}/>
  }
};

class RowRenderer extends React.Component {
  static propTypes = {
    idx: React.PropTypes.string.isRequired
  };

  setScrollLeft = (scrollBy) => {
    // if you want freeze columns to work, you need to make sure you implement this as apass through
    this.row.setScrollLeft(scrollBy);
  };

  getRowStyle = () => {
    return {
      color: this.getRowBackground()
    };
  };

  getRowBackground = () => {
    return this.props.idx % 2 ?  'green' : 'blue';
  };

  render() {return (<div style={this.getRowStyle()}>
      <ReactDataGrid.Row 
        {...this.props}
        ref={r => { this.row = r; }}
        cellRenderer={CellRenderer}
      />
    </div>);
  }
};

任何帮助深表感谢！

编辑：尝试了很多事情，仍然没有运气，但我发现该setScrollLeft方法永远不会传递给Row组件，所以也许它确实是 refs 和/或 props 传递的问题。

4

1 回答 1

0

我不是 100% 确定您所说的“固定”列是什么意思，但是如果您希望列的大小由软件设置而不由用户更改，您可以简单地设置 resizable = false。在列上设置locked = true 具有“冻结”列的效果，因此当您滚动时，特定列会保留在那里，这可能不是您想要的。

于 2017-03-08T05:12:11.217 回答