Telerik MVC 网格顶部的选定行

Question

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

我的 Jquery：

function unit_onDetailViewExpand(e) {
    // Select the Grid
    var grid = $(this).data('tGrid');
    //Close all other rows
    grid.$rows().not(e.masterRow).each(function (index, row) {
        grid.collapseRow(row);
    });

    /* TODO: move row to the top, this hasn´t worked for me so far
    grid.reorderColumn(0, grid.columnFromTitle("Name"));
    $.telerik.trigger(grid.element, 'repaint');
    */
}

谢谢大家:)

#### 已编辑####

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

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的内容没有移动的问题。假设我选择了一行，该行移到顶部，扩展了该行，但上一行的内容仍在扩展。

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

有人知道如何将详细视图的内容与行一起移动吗？

#### 已编辑（再次）####

到目前为止，我已经将表格行移到列表的顶部，但是每次扩展特定行时，我都会不断获取原始顶行的内容（第二位的内容）。从我在 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);
}

你对我帮助很大，也许我可以再犯一次？ :)

#

#

#

Answer 1

Grid 组件具有基础数据。 您还需要定位由选定行表示的数据项。

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

问候

Answer 2

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

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

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

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

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