React.js和丰富的datagrid组件或者至少是hack [2015]

Question

之前,我们使用的是jqGrid.后来我们搬到了Backbone.js,开始使用Backgrid.

现在,我们正在评估将Backbone.Views移动到React组件,我们找不到任何网格插件/附加组件的胖和丰富的内容.

基本上,我们需要你想象的一切,选择,过滤,分页,编辑,排序,子网格......开箱即用:)我知道我们可以制作我们自己的表组件,添加排序和东西,但这太过分了为了我们.我们更希望一些"重用":)

我在谷歌上错过了一些网格组件吗？

要么

是否有一些(令人讨厌的)使用一些旧的DOM依赖,jquery,backbone.js与React的东西？

Answer 1

您可以在React中使用任何普通的JavaScript库.即使它直接改变了DOM.一个例外是这个库应该只改变自己的DOM.您可以"禁用"组件的React.首次渲染后,React将无法与此组件一起使用.

React.createClass({
    componentDidMount: function() {
        myNativeJsGrid.init({
            domElem: this.getDOMNode(),
            data: props,
            onRowRemove: function(row){
                this.props.onRowRemove(row);
            }.bind(this)
        });
    },
    shouldComponentUpdate: function(props) {
        myNativeJsGrid.update({
            domElem: this.getDOMNode(),
            data: props
        });
        return false;
    },
    render: function() {
        return React.DOM.div();
    }
});

注意return false;在shouldComponentUpdate.它向React表明它不应该更新DOM中的任何内容(我们手动完成).

实现componentDidMount并shouldComponentUpdate依赖于网格API.但想法是你应该:

• init网格 componentDidMount

• 更新网格 shouldComponentUpdate

• props如有必要,使用内部网格事件来调用函数来更新数据

Answer 2

开始使用:Griddle及其在NPM中也可用.

1. 自定义格式
2. 无限滚动
3. 自定义样式

npm install griddle-react --save

Answer 3

ReactDataGrid是React的数据网格,具有很多提到的功能,即排序,过滤,选择,自定义格式化程序和编辑器,复制和粘贴,单元格向下拖动,冻结列.分页和子网格在路线图上.看看这个