javascript - 如何重命名表格中的列标题

Question

我遇到了一个问题，我想通过在单元格中单击来重命名列标题，我正在使用 wijmo 网格来实现它，我的行正在编辑，但我也想通过单击它来编辑列标题并更改

搜索了很多后我无法通过wijmo获得，我可以通过其他方法实现它吗？所以也可以编辑行和列标题。下面是wijmo网格尝试。

 constructor(props){
    super(props);
    this.state= {
        categoryid:0,
        saved:false,
        data:this.getdata(),
        rows:0
    }

}  


     getdata(){
    let data = [];
    let num=parseInt(this.state.rows);
    console.log(typeof(num),num);
    for (let i = 0; i < num; i++) {
        data.push({
            id: i,
            country:"Enter Data",
            sales: "Enter Data",
            expenses: "Enter Data",
        });
    }
    return data;
}



 render(){
           return(
                     <wjGrid.FlexGrid itemsSource={this.state.data}>
                        </wjGrid.FlexGrid>
                )
        } 

但是通过这种方法我只能编辑行单元格，我还想编辑上面例子中的列标题，id，country，sales，expenses。如何直接在表格上重命名它们，如果不是wijomo网格，我怎样才能获得这来自其他方法，如 react-table 或任何其他方法。任何其他来源对我也有帮助，因为我被困了很长时间。

标签： javascriptreactjshtml-tablereact-tablewijmo-grid

Answer 1

您可以使用 wijmo 的 Popup 控件来编辑标题。只需创建一个带有输入元素的 Popup 并处理 FlexGrid 的单击事件。在 click 事件中，使用 show 方法显示弹出窗口。请参考以下示例：

样本