Jquery Telerik MVC网格顶部的选定行

我有一个Telerik MVC网格，我希望所选的被强制在列表的顶部。我正在为网格使用DetailedView，因此它是可折叠和可扩展的。如何将选定行强制置于列表顶部

我的Jquery：

Thanx伙计们：

编辑

这是我现在选择行时所做的操作：

function onRowSelect(e) {
    $(e.row).prependTo($(e.row).parent());
    var grid = $('#RentableUnits').data("tGrid");
    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows

    // expand the row
    grid.expandRow(tr);
}

现在我面临的问题是DetailedView的内容没有移动。假设我选择一行，该行移到顶部，展开该行，但前一行的内容仍在展开

我一直在查看，发现这与detailRow有关，但我不知道如何将其与masterRow一起移动

有人知道如何将detailedview的内容与行一起移动吗

重新编辑

到目前为止，表行被移到了列表的顶部，但每次特定的行被展开时，我都会不断地获取原始顶部行的内容，即第二位的内容。从我在Firebug中看到的情况来看，在扩展一个.t-master-row之前，表中没有.t-detail-row。我是否应该将其他内容与所选行一起移动，我的意思是除了masterRow和detailRow之外的其他内容

我还上传了Firebug的图片和显示HTML的问题

function onRowSelect(e) {
    var grid = $('#RentableUnits').data("tGrid");

    var selectedRow = $('#RentableUnits tbody>.t-state-selected');
    selectedRow.prependTo(selectedRow.parent());
    if (selectedRow.next().is('.t-detail-row')) {
        selectedRow.next().prependTo(selectedRow.parent());
    }
    selectedRow.prependTo(selectedRow.parent());

    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows
    // expand the row
    grid.expandRow(tr);
}

你帮了我很大的忙，也许我还能再来一次

---

需要时，您可以使用以下脚本轻松地将选定行移到顶部：

var selectedRow=  $('#GridName tbody>.t-state-selected'); 
selectedRow.prependTo(selectedRow.parent())

请注意，如果需要，可以将选择器更改为更通用的-使用类名或使用搜索上下文查找所选行

或者您甚至可以使用事件来执行逻辑，如下所示：

function onRowSelect(e){
    $(e.row).prependTo($(e.row).parent());
}

---

网格组件具有底层数据。 您还需要定位由选定行表示的数据项

function on_RowSelect(e){

    var grid = $(e.target).data('tGrid');
    var $rows = grid.$rows();

    // move underlying data
    var rowIndex = $rows.index(e.row);
    grid.data.unshift(grid.data.splice(rowIndex,1)[0])

    // move rows
    var $selectedRows = $(e.row).add($(e.row).next('.t-detail-row'));
    $rows.parent().prepend($selectedRows);
}

---

问候

谢谢您的回答@Pechka，您的代码可以将行移到顶部。然而，我现在面临着另一个问题。我使用的是DetailedView，当我将行移到顶部时，我仍然会展开每行中的旧内容。如果我将一行移到顶部，然后展开它，则旧行的内容仍然作为展开的内容存在。有什么想法吗？我明白了，那么你可以做以下事情。如果选定行之后的下一个元素是详图行，请将其移动到网格顶部，然后将行本身移动到顶部。这样，您将保持网格的结构有效，并且当您展开它时，细节行将如您所期望的那样位于第一行的正下方。e、 g.var selectedRow=$'GridName tbody>.t-state-selected'；selectedRow.prependToselectedRow.parent；如果selectedRow.next.is'.t-detail-row'{selectedRow.next.prependToselectedRow.parent}selectedRow.prependToselectedRow.parent谢谢@Pechka，你帮了大忙。也许我可以再打扰你一些？我再次编辑了我的问题。我还上传了我从Firebug截取的图片，只是为了在我选择行时显示HTML标记：哇！！！成功了！非常感谢@Rustam先生，您为我省了很多麻烦：我不会想到使用unshift函数并将它们拼接在一起。再次感谢你。

function on_RowSelect(e){

    var grid = $(e.target).data('tGrid');
    var $rows = grid.$rows();

    // move underlying data
    var rowIndex = $rows.index(e.row);
    grid.data.unshift(grid.data.splice(rowIndex,1)[0])

    // move rows
    var $selectedRows = $(e.row).add($(e.row).next('.t-detail-row'));
    $rows.parent().prepend($selectedRows);
}