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。 但想法是你應該：

• componentDidMount init網格

• 在shouldComponentUpdate中更shouldComponentUpdate格

• 使用內部網格事件從props調用函數以在必要時更新數據

Answer 2

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

1. 自定義格式
2. 無限滾動
3. 自定義樣式

npm install griddle-react --save

Answer 3

ReactDataGrid是React的數據網格，具有很多提到的功能，即排序，過濾，選擇，自定義格式化程序和編輯器，復制和粘貼，單元格向下拖動，凍結列。 分頁和子網格在路線圖上。 看看這個

Answer 4

查看http://zippyui.github.io/react-datagrid/#/ ，這是一個很好的網格，內置了很多功能

Answer 5

還有http://allenfang.github.io/react-bootstrap-table完全基於Bootstrap表構建。

Answer 6

最好的網格可能是ag-Grid，但行分組和子網格功能僅適用於非免費的企業版。
所以我切換到Tabulator： Tabulator React 。 我在我目前的真實項目中使用它。 它提供了很好的功能，如行分組和子網格。 它快速而且完全免費。 它得到了積極維護，並為未來的改進提供了路線圖。 嘗試一下，也許你會喜歡它。

但如果你仍然喜歡jqGrid，喲仍然可以使用它。 安裝npm包：npm install free-jqgrid
這是我的代碼：

import $ from './../../../node_modules/jquery/dist/jquery';
import "./../../../node_modules/free-jqgrid/js/i18n/grid.locale-en.js"
import * as jqGrid from "./../../../node_modules/free-jqgrid/js/jquery.jqGrid.min.js"

//import "./../../../node_modules/free-jqgrid/dist/css/ui-lightness/jquery-ui-1.7.1.custom.css"
import "./../../../node_modules/free-jqgrid/dist/css/ui.jqgrid.css"

jQuery.jgrid.no_legacy_api = true;

export default class MyJqGrid extends Component {
constructor(props) {
    super(props);

    this.mydata = [
        {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
        {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];
}

componentDidMount() {
    this.$el = $(this.el);

    this.$el.jqGrid({
        data: this.mydata,
        datatype: "local",
        height: 'auto',
        rowNum: 30,
        rowList: [10,20,30],
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
            {name:'id',index:'id', width:60, sorttype:"int"},
            {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
            {name:'name',index:'name', width:100, editable:true},
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
            {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},      
            {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
            {name:'note',index:'note', width:150, sortable:false}       
        ],
        pager: "#pagerdiv",
        viewrecords: true,
        sortname: 'name',
        grouping:true,
        groupingView : {
            groupField : ['name']
        },
        caption: "Grouping Array Data"
    });
}

componentWillUnmount() {
    this.$el.empty();
}

render() {
    return (
        <>
            <table ref={el => this.el = el}></table>
            <div id="pagerdiv"></div>
        </>
    );
}

}