【问题标题】:Datatable rowReordering prevent certain row数据表行重新排序防止某些行
【发布时间】:2020-01-13 11:23:57
【问题描述】:

我有简单的 DataTable,我想阻止用户拖动表中的最后一行(在本例中为测试 6)并阻止他在第 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/

【问题讨论】:

    标签: javascript jquery datatables datatables-1.10


    【解决方案1】:

    您可以在columnDefs 中使用orderable: false,这可以帮助您避免这种rowdrag。只需将no-sort 类添加到您的row

    columnDefs: [{
        targets: 'no-sort',
        orderable: false
      }
    ],
    

    也许这不适用于任何版本,但有一个技巧解决方案,使用pointer-events: none

    JSFiddle

    【讨论】:

    • 这是正确的,但这并不能解决我的问题,伙计。我想阻止用户拖动测试 6 行下方的任何行。我发布了解决方案,以便您了解它应该如何工作。顺便谢谢您的回复! @pedram
    【解决方案2】:

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-07-19
      • 2017-09-01
      • 2016-04-12
      • 2019-11-01
      • 2019-06-19
      • 2010-12-10
      • 2020-09-24
      相关资源
      最近更新 更多