Jquery 如何将剑道等级网格与剑道排序表相结合？

我有一个剑道等级网格，我想能够排序的外部网格。我让排序开始工作，但细节网格不会随其父网格移动

我的网格：

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: [{
            Name: "Hilari",
            prodID: 1
        }, {
            Name: "Carlo",
            prodID: 2
        }, {
            Name: "Kelcie",
            prodID: 3
        }],
        schema: {
            model: {
                fields: {
                    Name: {
                        type: "string"
                    },
                    prodID: {
                        type: "number"
                    }
                }
            }
        }
    },
    columns: [{
        field: "Name"
    }],
    detailInit: detailInit
}).data("kendoGrid");

可排序的：

grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: $.noop,
    cursor: "move",
    placeholder: function (element) {
        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    container: "#grid tbody",
    change: function (e) {
        //     var skip = grid.dataSource.skip(),
        //     oldIndex = e.oldIndex + skip,
        //     newIndex = e.newIndex + skip,
        //     data = grid.dataSource.data(),
        //     dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        //     grid.dataSource.remove(dataItem);
        //     grid.dataSource.insert(newIndex, dataItem);

    }
});

细节初始化：

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: [{
                prodID: 1,
                Pet: "Dog"
            }, {
                prodID: 1,
                Pet: "Cat"
            }, {
                prodID: 1,
                Pet: "Fish"
            }, {
                prodID: 2,
                Pet: "Bird"
            }, {
                prodID: 2,
                Pet: "Ferret"
            }, {
                prodID: 3,
                Pet: "Snake"
            }, {
                prodID: 3,
                Pet: "Frog"
            }],
            filter: {
                field: "prodID",
                operator: "eq",
                value: e.data.prodID
            }
        },
        columns: [{
            field: "Pet"
        }]
    });
}

下面是一个JSBin，它显示了我的问题：

有什么想法吗

谢谢，

---

希拉里你说得对。如果检查生成的HTML，您将看到子网格实际上是父网格中的另一行

Sortable移动一行，但不检查下一行实际上是父网格还是子网格的一部分

您可能会做一些技巧，如在开始移动之前折叠父对象，然后对其进行正常排序，最后将其重新展开

作为第一种方法，请尝试在KendSortable中定义以下事件处理程序：

start : function(e) {
    // collapse master row when starting to move
    grid.collapseRow(e.item);
},
change: function(e) {
    // expand it back
    grid.expandRow(e.item);
}

请看这里：

然后，您可以通过在“开始”中检查主行是否已实际展开，并在“更改”中仅在“开始”中检测到主行已展开时才展开来改进解决方案

start : function(e) {
    grid.isExpanded = $("a.k-minus", e.item).length > 0;
    grid.collapseRow(e.item);
},
change: function(e) {
    if (grid.isExpanded) {
        grid.expandRow(e.item);
    }
}

---

请看这里：

你说得对。如果检查生成的HTML，您将看到子网格实际上是父网格中的另一行

Sortable移动一行，但不检查下一行实际上是父网格还是子网格的一部分

您可能会做一些技巧，如在开始移动之前折叠父对象，然后对其进行正常排序，最后将其重新展开

作为第一种方法，请尝试在KendSortable中定义以下事件处理程序：

start : function(e) {
    // collapse master row when starting to move
    grid.collapseRow(e.item);
},
change: function(e) {
    // expand it back
    grid.expandRow(e.item);
}

请看这里：

然后，您可以通过在“开始”中检查主行是否已实际展开，并在“更改”中仅在“开始”中检测到主行已展开时才展开来改进解决方案

start : function(e) {
    grid.isExpanded = $("a.k-minus", e.item).length > 0;
    grid.collapseRow(e.item);
},
change: function(e) {
    if (grid.isExpanded) {
        grid.expandRow(e.item);
    }
}

---

请参见此处：

您需要稍微调整排序表的更改处理程序，以解决以下问题：

dataSource.skip可以返回未定义的 将拖动的行插入正确位置后，需要找到要再次展开的行。由于插入后网格刷新，因此项不再有效 以下是您如何做到这一点：

change: function (e) {
    var skip = grid.dataSource.skip() || 0,
        oldIndex = e.oldIndex + skip,
        newIndex = e.newIndex + skip,
        uid = e.item.data("uid"),
        dataItem = grid.dataSource.getByUid(uid),
        rowToExpand;

    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);

    if (grid.isExpanded) {
        rowToExpand = $(grid.tbody).find("tr[data-uid=" + uid + "]");
        grid.expandRow(rowToExpand);
    }
}

---

，基于OnaBai的解决方案，您需要稍微调整排序表的更改处理程序，以解决以下问题：

dataSource.skip可以返回未定义的 将拖动的行插入正确位置后，需要找到要再次展开的行。由于插入后网格刷新，因此项不再有效 以下是您如何做到这一点：

change: function (e) {
    var skip = grid.dataSource.skip() || 0,
        oldIndex = e.oldIndex + skip,
        newIndex = e.newIndex + skip,
        uid = e.item.data("uid"),
        dataItem = grid.dataSource.getByUid(uid),
        rowToExpand;

    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);

    if (grid.isExpanded) {
        rowToExpand = $(grid.tbody).find("tr[data-uid=" + uid + "]");
        grid.expandRow(rowToExpand);
    }
}

---

，基于OnaBai的解决方案

感谢您的快速响应！我喜欢您提出的建议，但它们仍然无助于这样一个事实，即内部网格没有与父网格一起移动。第一个下拉列表是狗、猫和鱼。当你将那个人移动到底部时，新的最上面的人现在有狗、猫和鱼，即使它们本应该和被移动的人一起移动。这有意义吗？谢谢你的快速回复！我喜欢您提出的建议，但它们仍然无助于这样一个事实，即内部网格没有与父网格一起移动。第一个下拉列表是狗、猫和鱼。当你将那个人移动到底部时，新的最上面的人现在有狗、猫和鱼，即使它们本应该和被移动的人一起移动。这有意义吗？工作演示很棒，但请确保将您的代码也作为问题的一部分发布，以便在非现场内容丢失的情况下，问题仍然有意义。工作演示很棒，但是，请确保将您的代码也作为问题的一部分发布，以便在场外内容丢失的情况下，问题仍然有意义