0

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

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

我一直在查看文档，发现这与 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);
}

你给了我很大的帮助，也许我可以再来一次？:)

#

页面加载，行是正确的

#

选择的行并加载了错误的详细内容（与第一行相同）

#
4

2 回答 2

1

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

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

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

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

function onRowSelect(e){
    $(e.row).prependTo($(e.row).parent());
}
于 2012-11-24T23:23:11.003 回答
0

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

问候

于 2012-11-29T12:16:39.353 回答