Question

在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（）{}中做什么来进行排序（和过滤，但主要是排序）？

Answer 1

而不是尝试在headerRenderer中调用函数，而是放置一个组件：

{
  key: "myColumn1",
  name: "My Column Name",
  headerRenderer: <renderHeader value={this.renderHeader()} />,
  sortable: true,
  filterable: true
},

Answer 2

近一年前，这个解决方案似乎是checked-in。我在内联网上工作，没有直接的互联网访问开发，所以也许我有一个旧版本。由于我无法在我的环境中获得该版本，我将等待有人在我接受我自己的答案之前验证最新版本是否按预期工作（或者我将尝试获取最新版本的更改。）

我需要做的另一件事就是实现解决方案的方法是停止传播click事件，因为在我的自定义标题中，我有一个可点击的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

????

react-data-grid headerRenderer排序

2 个答案:

的更新