- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我按照下面的例子来实现“逐列展开”。
/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
const products = [];
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
if (i < 3) {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i,
expand: [ {
fieldA: 'test1',
fieldB: (i + 1) * 99,
fieldC: (i + 1) * Math.random() * 100,
fieldD: '123eedd' + i
}, {
fieldA: 'test2',
fieldB: i * 99,
fieldC: i * Math.random() * 100,
fieldD: '123eedd' + i
} ]
});
} else {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
}
addProducts(5);
class BSTable extends React.Component {
render() {
if (this.props.data) {
return (
<BootstrapTable data={ this.props.data }>
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
</BootstrapTable>);
} else {
return (<p>?</p>);
}
}
}
export default class ExpandRow extends React.Component {
constructor(props) {
super(props);
}
isExpandableRow(row) {
if (row.id < 3) return true;
else return false;
}
expandComponent(row) {
return (
<BSTable data={ row.expand } />
);
}
render() {
const options = {
expandRowBgColor: 'rgb(242, 255, 163)',
expandBy: 'column' // Currently, available value is row and column, default is row
};
return (
<BootstrapTable data={ products }
options={ options }
expandableRow={ this.isExpandableRow }
expandComponent={ this.expandComponent }
search>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name' expandable={ false }>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price' expandable={ false }>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}
问题:我想在“多列”上实现扩展行。例如:
我会用 3 列中的 2 列来扩展行。
产品编号产品名称产品价格
我想要的行为是:
1.) 当用户点击“product id”列时,我想显示一些其他 BSTTableNew 组件,如上面(在展开行)但具有“字段 A”和“字段 B”列以及一些其他功能。
2.) 当用户点击“产品名称”列时,我想显示与上面类似的 BSTTable(在展开行上)。
我必须在下面的代码中进行哪些更改才能根据我单击以展开包含更多详细信息的行的列加载相应的组件类?
我相信我必须对下面的代码进行一些更改才能加载其他组件:
expandComponent(row) {
if( column === "productID") { //something of this sort I want
return (
<BSTableNew data={ row.expand } />
);
}
if( column === "productName") { //something of this sort I want
return (
<BSTable data={ row.expand } />
);
}
}
如何实现以上?
最佳答案
react-bootstrap-table
已弃用,您应该使用 react-bootstrap-table2
如果我正确理解了要求,您想要展开行,但展开的内容应该不同,具体取决于单击的列/单元格。
服用 'Expand Management'示例作为基础,我们可以看到如何使用状态中的数组来控制展开的行。这很简单,但我们不能使用 onExpand
处理程序,因为它不依赖于列。我们可以使用 expanded
选项:
expanded: this.state.expanded,
这个数组只包含展开的行索引。
例子包含'Column Event' - onClick
获取我们需要的column
参数。此事件必须在 columns
中定义,例如像:
const columns = [{
dataField: 'id',
text: 'Product ID',
events: {
onClick: (e, column, columnIndex, row, rowIndex) => {
console.log(row, column);
const isRowExpanded = this.state.expanded.includes( row );
this.setState( {
column: 'id',
expanded: isRowExpanded ?
this.state.expanded.filter(x => x !== row)
: [...this.state.expanded, row]
});
}
}
}, {
dataField: 'name',
text: 'Product Name',
events: {
onClick: (e, column, columnIndex, row, rowIndex) => {
console.log(row, column);
const isRowExpanded = this.state.expanded.includes( row );
this.setState( {
column: 'name',
expanded: isRowExpanded ?
this.state.expanded.filter(x => x !== row)
: [...this.state.expanded, row]
});
}
}
}, {
dataField: 'price',
text: 'Product Price'
}];
这样我们就可以同时处理 - 展开的行和最后点击的列。
我们只需要扩展渲染器参数化:
const expandRow = {
renderer: row => {
if (this.state.column==='id') {
return (
<ColumnIDClickedTable someParam={someData[row]} />
)
} else {
return <ColumnNameClickedTable />
}
},
应该就这些了。只为前 3 行可扩展添加条件是一项简单的任务。所有展开的行都将更改列更改的内容 - 仅最后一次点击保存。如果您需要单独的行行为,请将列保存在索引数组中。
关于javascript - 逐列展开 : Expand row by multiple columns and load different components according to the column clicked,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55875136/
我有一个简单的 Card 组件,是从material-ui 的网站复制的。 我正在尝试在我的代码中实现它。当我单击 CardHeader 时,它不会展开。 这是我的组件: import React,
我已经使用延迟加载实现了一棵树。第一级节点是在树创建时创建的,其中只有当用户展开任何特定节点时才会创建子节点。 数据来自数据库,我们向数据库发出查询以填充子节点。实现了 TreeExpansionLi
假设我有 3 个向量(仅作为示例)。现在我想获取这 3 个所有可能组合的随机样本。通常,我会这样做: x <- 1:3 y <- 10:12 z <- 15:18 N <- length(x) * l
如果我使用 dabbrev-expand为了扩展,Emacs 搜索当前缓冲区,然后搜索其他具有相同模式的缓冲区。这是由 dabbrev-friend-buffer-function 处理的默认设置为
我想像这样切片主窗口 我的布局代码如下: QGridLayout *gLayout = new QGridLayout (); viewWidget->setStyleSheet("backgroun
我在 Android Studio Canary 1 上尝试 Jetpack Compose 并添加了 Column可组合到 ui。 Column有一个名为 modifier 的属性我们可以在其中传递
我正在努力让我们的 Accordion 可以使用 aria-expanded 等 aria 标签来访问。当单击 Accordion 触发器标题或按下键盘上的“返回”按钮时,我正确地更改了 aria-e
根据 http://doc.qt.io/qt-5/qsizepolicy.html#Policy-enum ,设置小部件的大小策略具有以下效果: The sizeHint() is a sensibl
我将使用Live Actitions显示实时数据,并在一个应用程序中添加对Dynamic Island的支持,该应用程序具有现有的小部件扩展。然而,我也不能把它造出来。当我收到错误信息时。和。即使我提
我有一个设置,如下所示: //With dynamic content here. 我正在运行一个脚本,该脚本将 #nav 的大小调整为浏览器窗口的高度大小。但有时我的
我正在使用jquery checkboxtree plugin它效果很好,并且上面的链接中有很好的文档和示例。我现在遇到一种情况,我想以编程方式检查节点。使用以下语法支持此操作: $('#tabs-
我正在尝试以下实验: 我有两个QpushButtons,比如PushA 和PushB。现在 PushA 在 QHBoxLayout 中,PushB 也在它自己的 QHBoxLayout 中。这两个水平
我目前有一个 OData V4 服务,它具有以下模型。 “类别”——“代码” 对于每个类别,可以有许多代码。 我需要 $expand the Codes, $filter where Active =
我的目的是创建一个带有 QVBoxLayout 的可滚动控件,上面有各种控件(比如按钮)。该控件放在 *.ui 窗体上。在该控件的构造函数中,我编写了以下代码: MyScrollArea::M
你们如何解决以下 Flutter 布局? 我有一个屏幕,我必须在其中显示,如图所示:一个 Logo + 3 个 TextFormFields + 2 个按钮 + 一个容器。 问题: 我需要将所有小部件
我使用最新版本的 mvvm light 工具包,但是我不清楚如何将 EventToCommand 用于事件 TreeViewItem.Expanded。 这很有效......我做错了什么?
我是 LINQ 的新手。 我有以下查询,我不知道它代表什么。 var query = (from p in data.First
这里有一个小问题。我有一个表,当我想单击运行时,该表应该展开,而且同一行中有一个展开按钮,它也应该展开一个 div。 问题:当我单击该行时,一切正常,div 将滑入。当我单击按钮(位于表行中)时,会产
图片:
我的应用程序中有 Expander 设置 FlowDirection 正常工作,但标题文本显示在水平方向。我想显示标题文本垂直绘制。 最佳答案 使用 sl 工具包中的 LayoutTransforme
我是一名优秀的程序员,十分优秀!