reactjs - 如何更改剑道反应中详细信息行的详细信息展开/折叠列的标题?
问题描述
我需要在折叠/展开列的标题中添加文本“+/-”以获取剑道反应中的详细信息行。我还想添加和事件,因此当用户单击该列时,它会展开或折叠所有行。我用它来创建详细信息行。
解决方案
请查看此代码片段,它添加了网格标签和 onclick 功能。我没有想到的部分是切换展开/折叠。我也遇到了这个属性expandField,但我不知道如何使用它。
class DetailComponent extends GridDetailRow {
render() {
const dataItem = this.props.dataItem;
return (
<section>
<p><strong>In Stock:</strong> {dataItem.UnitsInStock} units</p>
<p><strong>On Order:</strong> {dataItem.UnitsOnOrder} units</p>
<p><strong>Reorder Level:</strong> {dataItem.ReorderLevel} units</p>
<p><strong>Discontinued:</strong> {dataItem.Discontinued}</p>
<p><strong>Category:</strong> {dataItem.Category.CategoryName} - {dataItem.Category.Description}</p>
</section>
);
}
}
class App extends React.Component {
state = {
data: products.slice(0)
}
expandChange = (event) => {
event.dataItem.expanded = !event.dataItem.expanded;
this.forceUpdate();
}
render() {
return (
<Grid
data={this.state.data}
detail={DetailComponent}
style={{ height: '400px' }}
expandField="expanded"
onExpandChange={this.expandChange}
>
<Column field="ProductName" title="Product" width="300px" />
<Column field="ProductID" title="ID" width="50px" />
<Column field="UnitPrice" title="Unit Price" width="100px" />
<Column field="QuantityPerUnit" title="Qty Per Unit" />
</Grid>
);
}
}
class ShowAlert extends React.Component {
showAlert() {
alert("Im an alert");
}
render() {
return <a className='k-link' onClick={this.showAlert}>+/-</a>;
}
}
export default ShowAlert;
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
const heirarchyElement = document.getElementsByClassName("k-hierarchy-cell")[0];
ReactDOM.render(<ShowAlert />, heirarchyElement);
推荐阅读
- selenium - 单击后提交按钮不更改/导航页面
- android - 如何在 Android 中限制 ScrollView 的边界?
- ruby-on-rails - Rails:带有散列的枚举不返回散列键:值
- php - mysql。从具有共同列的许多表中检索数据
- html - 在 bootstrap modal 中添加两个 modal-content
- log4net - .Net Core 功能上的 Log4Net 翻转失败
- excel - 从一个工作表中创建与另一个工作表上的单元格匹配的所有值的列表
- apache-flink - Apache Flink:.countWindow() 是在发生许多事件后处理代码的正确方法吗?
- azure - 如何在逻辑应用程序中发送一封来自地址设置为不回复的电子邮件?
- excel - excel单元格公式中的绝对工作表引用