使用 jQuery 插件使 table 列可调整大小

Question

我使用 DataTables 和 jquery-resizable-columns to create table with resizable columns. Here is example。

我尝试在带有数据表的基本 ReactJS 应用程序中使用 jquery-resizable-columns 插件。我在componentDidMount中添加了resizableColumns函数，但是没有用。

我在使用 ReactJS，有人可以向我解释为什么它不起作用吗？

jsx 脚本

/** @jsx React.DOM */

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  render: function() {
    return (
      <div>
        <h3>React + jQuery.DataTable</h3>

        <LopMonHoc />
      </div>
    );
  }
});

var LopMonHoc = React.createClass({
    getInitialState: function(){
        return {data: []}
    },
    componentDidMount: function(){
        var self = this;
        $('#mytable').DataTable({
          "bAutoWidth": false,
          "bDestroy": true,     
          "fnDrawCallback": function() {                
                self.forceUpdate();         
          }, 
        });
        $("#mytable").resizableColumns();
    },
    componentDidUpdate: function(){
        $('#mytable').DataTable({
          "bAutoWidth": false,
          "bDestroy": true, 
        });
    },
    render: function(){
        var x = [];

        x.push(
            <tr><td>zaxs</td><td>hello</td><td>xzc</td></tr>
        )

        x.push(
            <tr><td>hello</td><td>wef</td><td>qw</td></tr>
        )

        x.push(
            <tr><td>wefwe</td><td>fgn</td><td>asc</td></tr>
        )

        return (
            <div className="table-responsive">
                <h4>Hello</h4>
                <table className="table table-bordered" id="mytable">
                    <thead>
                        <tr className="success">
                            <td>col1</td>
                            <td>col2</td>
                            <td>col3</td>
                        </tr>   
                    </thead>
                    <tbody>
                        {x}
                    </tbody>
                </table>
            </div>
        )       
    }
 });

React.render(<TodoApp />, document.body);

Answer 1

ReactJS 和整个节点生态系统的好处在于，已经有人完成了工作并变成了 plugin/module。这里有一些对你有用的东西：colresizable。这样做的好处是，您不必管理每个组件的放置位置，它可以满足您的需求，甚至更多...

您需要将此添加到 componentDidUpdate 方法的末尾...

$(function(){$("#mytable").colResizable();});

你有：

... 
componentDidMount: function(){
    var self = this;
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true,     
      "fnDrawCallback": function() {                
            self.forceUpdate();         
      }, 
    });
    $("#mytable").colResizable();
},
componentDidUpdate: function(){
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true, 
    });
},
...

你需要改成这样：

...
componentDidMount: function(){
    var self = this;
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true,     
      "fnDrawCallback": function() {                
            self.forceUpdate();         
      }, 
    });
},
componentDidUpdate: function(){
    $('#mytable').DataTable({
      "bAutoWidth": false,
      "bDestroy": true, 
    });
    $(function(){$("#mytable").colResizable();});
},
...

我刚刚在您提供的 jsfiddle link 上对其进行了测试，并且能够调整列的大小。

Answer 2

有 ColReorderWithResize 插件可以为最新版本的 jQuery DataTables 1.10 添加重新排序和调整列大小的功能。

您需要包含适当的 JS 文件并使用以下初始化代码。

var table = $('#example').DataTable({
    'dom': 'Rlfrtip'
});

有关代码和演示，请参阅 this example。

有关详细信息，请参阅 jQuery DataTables: Column reordering and resizing。

使用 jQuery 插件使 table 列可调整大小

Make table columns resizable with jQuery plugin

jquery

datatables

reactjs