Question

我有一张显示亲子关系的表格。我已经使用jQueryUI对表进行了排序。

但是，我想限制将行拖放到其父级中。

因此，例如，子项目 - ＆＃34;手动项目＆＃34;和＆＃34; Rec＆＃34; - 只能与父母一起排序，即在＆＃34;职位＆＃34;应该限制移动到另一个父母。

这可能吗？我尝试添加包含：＆＃34;父＆＃34; 但没有变化。

＆＃13;

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());

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/fvyw5yfv/

Answer 1

我在每一行上使用data-parentid =“parentid”attribut解决了类似问题，然后在可排序的停止函数中我只是获取该数据并检查丢弃的是否具有当前表的正确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/

希望有所帮助，

可排序的jQueryUI表行

1 个答案: