Question

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

我尝试在DataTables的基本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和整个节点生态系统的好处在于，其他人已经完成了工作并转变为插件/模块。以下是对您有用的内容：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链接上对其进行了测试，并且能够调整列的大小。

Answer 2

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

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

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

请参阅this example以获取代码和演示。

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

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

2 个答案: