Javascript 如何在 DataTables 的 FixedColumns 插件中以交互方式调整固定列的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30411162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to interactively resize a fixed column in DataTables's FixedColumns plugin
提问by neversaint
I have the following table:
我有下表：
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Using this script I can scroll the 2nd columns onward and let 1st column (First name) fixed.
使用此脚本，我可以向前滚动第二列并让第一列 ( First name) 固定。
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table );
} );
What I want to do is to manuallyinteractively resize the first column on the fly. How can I achieve that?
我想要做的是 手动以交互方式动态调整第一列的大小。我怎样才能做到这一点？
回答by davidkonrad
There is no native method in FixedColumns APIto do this. Instead, set the width through header(), here setting the first column to 200px:
FixedColumns API 中没有本地方法来执行此操作。相反，将宽度header()设置为 ，此处将第一列设置为200px：
table.tables().header().to$().find('th:eq(0)').css('min-width', '200px');
$(window).trigger('resize');
table.draw()results in double scrollbars (disappearing upon resize though). Somehow FixedColumns is not fully included in a draw()- not even FixedColumns update()does this correct. But triggering resizeon the window does the job right.
table.draw()导致双滚动条（虽然在调整大小时消失）。不知何故，FixedColumns 并未完全包含在 a 中draw()- 甚至 FixedColumnsupdate()也不正确。但是resize在窗口上触发就可以了。
forked fiddle -> https://jsfiddle.net/k7err1vb/
分叉小提琴 -> https://jsfiddle.net/k7err1vb/
Update. The meaning of the question changed completely (?)
更新。问题的意思完全变了（？）
Well, there once was a great plugin ColReorderWithResize.js, but this works poorly with dataTables 1.10.x. So you could downgrade if the demand for a resizeable fixed column is essential. Apart from the new API
and default styling there is not so much difference between 1.9.x and 1.10.x - use 1.9.x myself in a project exactly because of the need of ColReorderWithResize.
好吧，曾经有一个很棒的插件ColReorderWithResize.js，但它在 dataTables 1.10.x 中效果不佳。因此，如果对可调整大小的固定列的需求必不可少，您可以降级。除了新的 API 和默认样式之外，1.9.x 和 1.10.x 之间并没有太大区别——我自己在项目中使用 1.9.x 正是因为需要ColReorderWithResize.
Some guy have made a colResize plugin -> https://github.com/Silvacom/colResizethat works with 1.10.2 and up. Here used on OP's fiddle :
有人制作了一个 colResize 插件 -> https://github.com/Silvacom/colResize适用于 1.10.2 及更高版本。这里用于 OP 的小提琴：
var table = $('#example').DataTable( {
dom: 'Zlfrtip',
//target first column only
colResize: {
exclude: [2,3,4,5,6,7]
},
...
})
demo -> https://jsfiddle.net/mhco0xzs/and it "works" - somehow - but not nearly as smooth as the good old ColReorderWithResize.js. Someone could take the challenge to refactor ColReorderWithResize.js, but I myself have certainly not have time for that at the moment.
演示 -> https://jsfiddle.net/mhco0xzs/并且它“有效” - 不知何故 - 但不像旧的 ColReorderWithResize.js 那样流畅。有人可以接受挑战来重构 ColReorderWithResize.js，但我本人目前肯定没有时间这样做。
回答by Samvel Avanesov
You should try using a plugin to add resizable header functionality. You can try using this: http://www.bacubacu.com/colresizable/
您应该尝试使用插件来添加可调整大小的标头功能。您可以尝试使用这个：http: //www.bacubacu.com/colresizable/
The question was asked and answered on StackOverflow.com already here: Resizable table columns with jQuery
已经在 StackOverflow.com 上提出并回答了这个问题：Resizable table columns with jQuery
回答by PufferTD
I also have problems just like you and I use the following solution.
我也有和你一样的问题，我使用以下解决方案。
window.fixedColumns = new $.fn.dataTable.FixedColumns( table , { leftColumns: 3} );
//Events occur when changing column width.(paginate, sort , click, ... )
// $('.sorting').click....
// $('.paginate_button').click....
$('.DTFC_Cloned').width();
fixedColumns.fnRedrawLayout();
http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout
http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout
