2

在 react-data-grid 中使用自定义标题单元格时如何实现排序和过滤？

{
  key: "myColumn1",
  name: "My Column Name",
  headerRenderer: this.renderHeader,
  sortable: true,
  filterable: true
},
{
  key: "myColumn2",
  name: "My Other Column Name",
  sortable: true,
  filterable: true
}  
  ...

renderHeader(props){
  return  (<extra-stuff>
    {props.column.name}
  </extra-stuff>)
}

我的 myColumn2 排序很好，但自定义标题没有任何反应：myColumn1。我需要在 renderHeader(){} 中做什么才能使排序（和过滤，但主要是排序）工作？

4

2 回答 2

0

与其尝试在 headerRenderer 中调用函数，不如放置一个组件：

{
  key: "myColumn1",
  name: "My Column Name",
  headerRenderer: <renderHeader value={this.renderHeader()} />,
  sortable: true,
  filterable: true
},
于 2017-11-16T00:40:51.967 回答
-1

看起来解决方案已在大约一年前签入。我确实在 Intranet 上工作，并且没有直接的 Internet 访问权限进行开发，所以也许我有一个旧版本。由于我无法在我的环境中获得该版本，因此我将等待有人验证最新版本是否按预期工作，然后再接受我自己的答案（或者我将尝试获得带有更改的最新版本。）

我将与解决方案的实施方式有关的另一件事是停止传播单击事件，因为在我的自定义标题中，我有一个 ReactIcon 可单击以从状态措辞更改为菜单。因此，如果他们在标题中的图标上单击右键，则名称/菜单会更改，如果他们单击标题中的其他任何位置，则进行排序。我将不得不在 React 中查找如何做到这一点。

更新

我从上面链接中的签入中进行了更改，并将它们添加到我的 react-data-grid.js 中，效果很好。即，我必须将更改添加到 npm 提取到我们的 node_modules 中的纯 javascript 版本的代码中。

我也确实必须在我的 headerRenderer 中使用 e.stopPropagation() 调用，就像我认为我必须这样做一样，以便单击我在 headerRenderer 中的图标在单击时不会排序（但只是执行不同的操作），但这很容易添加。

我确实有一个关于我对我的 js 所做的更改的问题，这是更改的一部分......

return React.createElement(
  'div',
  {className: className,
   onClick: this.onClick,
   style: {cursor: 'pointer'} },
  React.createElement(
   'span',
   { className: 'pull-right' },
   this.getSortByText()
  ),
  //change was here from just: this.props.column.name
  this.props.column.headerRenderer? this.props.column.headerRenderer(this.props) : this.props.column.name
 );

我将如何在 JavaScript 中完成此操作，以便无论我的 headerRenderer 是()=>{ return <span>...</span> }还是<MyComponent />???

因为我总是为我的 headerRenderer 使用函数，所以我只是进行了更改，以便它以一种方式工作，但想知道如何进行更改，以便它以两种方式工作。像这样的东西？...

this.props.column.headerRenderer?
  (isFunction(this.props.column.headerRenderer)? this.props.column.headerRenderer(this.props) : React.createElement(this.props.column.headerRenderer, {...this.props}) )
  : 
  this.props.column.name

？？？

于 2017-11-22T19:22:39.390 回答