可排序的 jQueryUI 表行

Posted 2023-03-27

【中文标题】可排序的 jQueryUI 表行

【英文标题】：Sortable jQueryUI Table Rows

【发布时间】：2017-11-15 03:20:00

【问题描述】：

我有一个显示父子关系的表格。我已经使用 jQueryUI 使表格可排序。

但是，我想将行的拖放限制在其父级内。

因此，例如，子项 - “Manual Items”和“Rec” - 应该只能与它们的父项一起排序，即在“Positions”内，并且应该限制移动到另一个父项。

这可能吗？我尝试添加 containment: "parent" 但没有任何变化。

var currentID = 0;
$("#sortable").sortable(
    start: function (event, ui) 
        //debugger;
        currentID = $(ui.item).index();
        //console.log($(ui.item).index());
    ,
    cancel: ".ui-state-disabled",
    update: function (event, ui) 
        //debugger;
        //console.log($(ui.item).data('id'));
        var newID = $(ui.item).index();
        alert('Current: ' + currentID.toString());
        alert('New: ' + newID.toString());
    
);
$(".sortable").draggable(
    containment: "parent"
);

var viewModel = function(data) 
    var self = this;
   
    self.tasks = ko.observableArray([
   	TaskID: 1, TaskName: "ManualItems", Parent: 3,
    TaskID: 2, TaskName: "Trades", Parent: null,
    TaskID: 3, TaskName: "Positions", Parent: null,
    TaskID: 4, TaskName: "Rec", Parent: 3,
    TaskID: 5, TaskName: "Cash", Parent: null,
    TaskID: 6, TaskName: "ReportA", Parent: 5,
    TaskID: 7, TaskName: "FileIn", Parent: 2,
    TaskID: 8, TaskName: "ReportB", Parent: 5
    ]); 
    
  self.getChildren = function(row) 
    return ko.utils.arrayFilter(this.tasks(), function(item) 
      return item.Parent === row.TaskID
    );
  

  self.filteredtasks = ko.computed(function() 
    return ko.utils.arrayFilter(this.tasks(), function(item) 
      return !item.Parent;
    );
  , this);    
   
;

ko.applyBindings(new viewModel());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<table class="table table-hover">
        <thead>
            <tr>
                <th>Parent ID</th>
                <th>Parent Task</th>
                <th>Task ID</th>
                <th>Task name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody id="sortable">
            <!-- ko foreach: filteredtasks -->
            <tr class="ui-state-default ui-state-disabled">
                <td class="ui-state-default" data-bind="text: TaskID"></td>
                <td class="ui-state-default" data-bind="text: TaskName"></td>
                <td></td>
                <td></td>
            </tr>
            <!-- ko foreach: $root.getChildren($data) -->
            <tr class="ui-state-default">
                <td></td>
                <td></td>
                <td data-bind="text: TaskID"></td>
                <td data-bind="text: TaskName"></td>
                <td data-bind="text: Position"></td>
            </tr>
            <!-- /ko -->
            <!-- /ko -->

        </tbody>
    </table>

http://jsfiddle.net/fvyw5yfv/

【参考方案1】：

我在每一行上使用 data-parentid="parentid" 属性解决了类似的问题，然后在可排序停止函数中，我只是抓取该数据并检查删除的数据是否具有当前表的正确 ID，它应该是类似的到：

$("#sortable").sortable(
    start: function (event, ui) 
        //debugger;
        currentID = $(ui.item).index();
        //console.log($(ui.item).index());
    ,
    cancel: ".ui-state-disabled",
    update: function (event, ui) 
        //debugger;
        //console.log($(ui.item).data('id'));
        var newID = $(ui.item).index();
        alert('Current: ' + currentID.toString());
        alert('New: ' + newID.toString());
    ,stop: function(event, ui)
        if(ui.item.attr("data-parent") == 2)
        alert('wrong parent');
      
    
);

这是一个测试：http://jsfiddle.net/Kanzari/fvyw5yfv/7/

希望对你有帮助，