React.js和丰富的数据网格组件或至少是hack [2015]

React.js and rich datagrid components OR at least hack [2015]

本文关键字：hack 2015 组件 网格 js 数据网 数据 React      更新时间：2023-09-26

以前，我们使用jqGrid。后来我们搬到了Backbone.js，开始使用Backgrid。

现在，我们正在评估将 Backbone.Views 移动到 React 组件，我们找不到任何网格插件/附加

组件。

基本上，我们需要您可能想象的一切，选择，过滤，分页，编辑，排序，子网格...开箱即用:)我知道我们可以制作自己的表组件，添加排序和其他东西，但这对我们来说工作量太大了。我们更希望有一些"重用":)

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

或

是否有一些（讨厌的）方法可以在 React 中使用一些旧的 DOM 依赖项、jquery、backbone.js的东西？

你可以将任何普通的JavaScript库与React一起使用。即使它直接更改 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。但想法是你应该：

  • componentDidMount初始化网格

  • 在shouldComponentUpdate中更新网格

  • 使用内部网格事件调用 props 中的函数以在必要时更新数据

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

开始使用：Griddle 及其在 NPM 中也可用。

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

npm install griddle-react --save

查看 http://zippyui.github.io/react-datagrid/#/，这是一个很好的网格，内置了很多功能

还有 http://allenfang.github.io/react-bootstrap-table完全建立在引导表上。

相关文章：