jquery - 使用 jQuery 插件调整表格列的大小

Question

我使用 DataTables 和 jquery-resizable-columns创建具有可调整大小的列的表。这是example .

我尝试在带有 DataTables 的基本 ReactJS 应用程序中使用 jquery-ressized-columns 插件。我在 componentDidMount 中添加了 ressizedColumns 函数，但它不起作用。

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

jsfiddle

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 和整个节点生态系统的好处是其他人已经完成了工作并变成了插件/模块。这是对您有用的东西: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 链接上测试了它，并且能够调整列的大小。