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

我使用DataTables和jquery-resizable-columns来创建具有可resize的列的表。 这是一个例子 。

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

我在ReactJS,任何人都可以向我解释为什么它不起作用?

的jsfiddle

jsx脚本

/** @jsx React.DOM */ var TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''}; }, render: function() { return ( 

React + jQuery.DataTable

); } }); 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( zaxshelloxzc ) x.push( hellowefqw ) x.push( wefwefgnasc ) return (

Hello

{x}
col1 col2 col3
) } }); React.render(, document.body);

关于ReactJS和整个节点生态系统的好处是那里的其他人已经完成了工作并变成了一个插件/模块。 以下是对你有用的东西: 可变的 。 关于这一点的好处是你不必管理每个组件的放置位置,它可以做你想要的更多……

您需要将其添加到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链接上测试了它,并且能够调整列的大小。

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

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

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

有关代码和演示,请参阅此示例 。

有关更多详细信息,请参阅jQuery DataTables:列重新排序和resize 。