我有简单的DataTable,我想防止用户拖动表的最后一行(在本例中为Test 6),并要求他在该第六行之后添加任何行。因此,最后一行应始终保留在最后。他们的API有可能实现这种功能吗?还是我该怎么办?
提前感谢!
HTML:
<table class="table table-hover" id="launch_cpa_table">
<thead class="bg-info">
<th class="text-white">Step</th>
<th class="text-white">Name</th>
<th class="text-white">Gate</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test 1</td>
<td>Test 1</td>
</tr>
<tr>
<td>2</td>
<td>Test 2</td>
<td>Test 2</td>
</tr>
<tr>
<td>3</td>
<td>Test 3</td>
<td>Test 3</td>
</tr>
<tr>
<td>4</td>
<td>Test 4</td>
<td>Test 4</td>
</tr>
<tr>
<td>5</td>
<td>Test 5</td>
<td>Test 5</td>
</tr>
<tr style = 'background : gray'>
<td>6</td>
<td>Test 6</td>
<td>Test 6</td>
</tr>
</tbody>
JS:
var launch_table = $('#launch_cpa_table').DataTable( {
rowReorder: true,
columnDefs: [
{ orderable: true, className: 'reorder', targets: [0] },
{ orderable: false, targets: '_all' }
],
paging: false
} );
FiddleJs链接:https://jsfiddle.net/5r6u7z02/
您可以在orderable: false
中使用columnDefs
,这可以帮助您避免从row
到drag
。只需将no-sort
类添加到row
columnDefs: [{
targets: 'no-sort',
orderable: false
}
],
也许这不适用于任何版本,但是有一个技巧性的解决方案,请使用pointer-events: none