1

我试图隐藏react-data-grid中的 'id' 列。我用

隐藏：真

在该列中，但它只隐藏行值而不是列。编辑行值以将其发送到响应时，我需要“id”。代码如下。

createColumns = async (data) => {
    let columns = [], keys = [],images=[];
    if (data)
        keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
        if(Object.keys(data)[i] === "id" || Object.keys(data)[i] === "order"){
            columns.push({key: Object.keys(data)[i],
                name: Object.keys(data)[i],
                hidden: true});
        }else{
            columns.push({key: Object.keys(data)[i], name: Object.keys(data)[i], editable: true});
        }
    }

    await this.setState({columns});
};
4

3 回答 3

1

您只需从列列表中排除 id 并将行 getter 方法中的 id 值保留为row.id = 1。您可以在创建列时使用属性将元数据传递给每一列， getRowMetaData: (row) => row,并在编辑时访问 idthis.props.dependentValues.id

于 2018-07-05T09:36:46.873 回答
1

看起来，目前在 RDG 中隐藏某些列的最简单方法是 CSS ......假设我们有 5 列，我们想从 3 到 5 隐藏。然后：

.react-grid-HeaderCell:nth-child(3n), .react-grid-Cell:nth-child(3n), 
.react-grid-HeaderCell:nth-child(4n), .react-grid-Cell:nth-child(4n),
.react-grid-HeaderCell:nth-child(5n), .react-grid-Cell:nth-child(5n)  {
     display: none !important;

}

.react-grid-HeaderCell:nth-child(1n), .react-grid-Cell:nth-child(1n) {
     width: 50% !important;
}

.react-grid-HeaderCell:nth-child(2n), .react-grid-Cell:nth-child(2n) {
      left: 50% !important;
}
于 2019-10-15T01:13:23.073 回答
1

我玩弄了列格式，并让它在我可以在网上找到的所有其他选项都缺乏的地方工作。这是相当低的技术，但有效：

1）给列一个隐藏的值，这将隐藏列但不隐藏列标题。

2) 为该列指定一个空名称，否则您将在标题中看到文本。

3）给列的宽度为-1。宽度为 0 会留下一个小的空标题列，但 -1 显然会“隐藏”它。不太确定它在做什么，但它可以工作，看起来它可能会将它移到左侧的列下，但我不是 css 大师，所以不确定。

const columnTemplate = [
  {
    {
      key: "costCenter",
      name: "",
      width: -1,
      hidden: true
    }
}
];
于 2020-02-10T02:32:24.770 回答