1

我目前正在尝试将我自己的列选择器集成到 flask-bootstrap-table 3.0-beta2 包中。我在问题部分的 github 上找到了一个示例，如下所示：

export default class ColumnHideTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = { showModal: false, hiddenColumns: {} };
  }

  changeColumn(id) {
    return () => {
      this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, { id: !this.state.hiddenColumns.id }) });
    };
  }
}

但是，这只会显示/隐藏 ID 列，并且其他值的复选框被选中的值卡住，单击时，仅选中/取消选中并隐藏/显示 id 列

我正在尝试使用计算变量制定解决方案，并且我已经制作了以下内容：

  setColumnState(column) {
    let columns = Object.keys(cyhyData[0])
    var o = {}

    for(let i=0; i < columns.length;i++) {
      if(column == columns[i]) {
        Object.defineProperty(o, column, {
          value: !this.state.hiddenColumns.column,
          enumerable: true
        })
        break
      }
    }
    return o
  }  

  changeColumn(column) {
    return () => { 
      this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, this.setColumnState(column)) });

      console.log(this.state.hiddenColumns)
    };
  }

这正确地隐藏了列，但显然不会取消隐藏它们。如何切换！this.state.hiddenColumns.givenCol？

是否有我没有看到的更清洁的解决方案？

4

1 回答 1

0

我为任何需要它的人编写了一个解决方案。它并不优雅，但它可以工作:) 欢迎提出任何让这个更清洁的建议！

constructor(props) {
  super(props);
  this.state = { showModal: false, hiddenColumns: {} };
}

changeColumn(column) {
  return () => {
    var o = {}

    if(!this.state.hiddenColumns.hasOwnProperty(column)) {
      Object.defineProperty(o, column, {
        value: true,
        enumerable: true
      });
      this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, o) });
    } else {
      this.setState({ hiddenColumns: Object.assign(!this.state.hiddenColumns, o) });
    };
  }
}

closeColumnDialog = (onClick) => {
  this.setState({ showModal: false });
}

openColumnDialog = (onClick) => {
  this.setState({ showModal: true });
}
于 2016-12-09T18:27:43.130 回答