使用jQuery插件使表列可调整大小 [英] Make table columns resizable with jQuery plugin

问题描述

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

I use DataTables and jquery-resizable-columns to create table with resizable columns. Here is example.

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

I tried to use jquery-resizable-columns plugin in basic ReactJS application with DataTables. I added resizableColumns function in componentDidMount, but it doesn't work.

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

I am in ReactJS, can anybody explain to me why it doesn't work?

jsfiddle

jsx script

/** @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);

推荐答案

关于ReactJS和整个节点生态系统的好处是那个人在那里完成了工作并变成了一个插件/模块。以下是对您有用的内容： colresizable 。关于这一点的好处是，您不必管理每个组件的放置位置，它可以满足您的需求和更多...

The nice thing about ReactJS and the whole node ecosystem is that someone else out there has done the work and turned into a plugin/module. Here is something that will be of use to you: colresizable. The nice thing about this is that you won't have to manage where to put things for each component and it does what you want and more...

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

You need to add this to the end of your componentDidUpdate method...

$(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链接上测试过你提供并能够调整列的大小。

I just tested it on jsfiddle link you provided and was able to resize the columns.

这篇关于使用jQuery插件使表列可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！