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');
    */
}

Thanx家伙：）

#### EDITED ####

这就是我在选择行时所做的事情：

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

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

我一直在查看documentation并发现这与detailRow有关，但我无法弄清楚如何将它与我的masterRow一起移动。

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

#### EDITED（AGAIN）####

我到目前为止，表行被移动到列表的顶部，但每次扩展特定行时我都会获得原始顶行的内容（来自第二行的内容））。从我在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);
}

你对我很有帮助，也许我可以再犯一次了？：）

＃

Page Load, the rows are correct

＃

Row selected and the wrong detail-content is loaded (the same as the first row was)

＃

Answer 1

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

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

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

或者您甚至可以使用 onRowSelect 事件来执行您的逻辑：

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

Answer 2

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

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

此致

Telerik MVC Grid中的选定行

2 个答案: