2

每次切换选项卡时，我都需要防止剑道网格滚动到顶部，而我将剑道网格连接到标签条中的某些选项卡。

@(Html.Kendo().TabStrip()
  .Name("TabStrip")
  .Events(ev => ev.Select("onTabSelect"))
  .Items(tab =>
  {
      tab.Add().Text("Derp1")
         .Selected(true)
         .Content(@<text>
                   <div id="Derp1Append"></div>
                   <div id="multiform">
                       <div class="mainItemGridContainer" >
                           <div>
                               @(Html.Kendo().Grid(Model)
                                     .Name("DerpGrid")
                                     .Columns(columns =>
                                         {
                                             columns.Bound(p => p.Stuff);
                                         })
                                         .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .Read(read => read.Action("PopulateDerp", "Item")
                                         .Events(ev => ev.Error("onErrorDerpGrid"))
                                          )
                                     .Events(ev => ev.Change("onDerpChange"))
                               )
                           </div>
                       </div>
                   </div>
                   <div>
                       //abbreviated
                   </div>
               </text>);
          tab.Add().Text("Derp2")
             .Enabled(true)
             .Content(@<text>
                <div id="Derp2Append"></div>
                     //abbreviated
                </text>);
          tab.Add().Text("Derp3")
             .Enabled(false)
             .Content(@<text>
                <div id="SystemUsageAppend"></div>
                     //abbreviated
                </text>);
      }))

每次切换选项卡时，我都会将网格附加到所选选项卡中的 div 标签。这是 onTabSelect 的脚本。

var selectedTab = $(e.item).find("> .k-link").text();
    if (selectedTab == "Derp1") {
    var myGr1 = $("#multiform").detach();
    $("#Derp1Append").append(myGr1);
}
else if (selectedTab == "Derp2") {
    var myGr3 = $("#multiform").detach();
    $("#Derp2Append").append(myGr3);
}
else if (selectedTab == "Derp3") {
    var myGr4 = $("#multiform").detach();
    $("#Derp3Append").append(myGr4);
}

我希望能够将网格的滚动位置保持在与单击新选项卡之前相同的位置，因此每次都强制网格不滚动到顶部。你认为这实际上可能吗？

＃＃＃ 编辑 ＃＃＃

保持简短和简单。我想在选项卡选择之间保留网格的位置，因为它会自动滚动到顶部。另一方面，解决方案还可能涉及在选择选项卡后滚动到列表中的选定项目（并且网格已经滚动到顶部）。

4

1 回答 1

1

这是一篇堆栈溢出文章，展示了如何滚动到所选项目。
剑道网格滚动到选定的行

它绑定到 onChange 事件，但您可以将其绑定到 onContentLoad 事件，然后每次加载 Grid 时它都会滚动。

//    bind to 'change' event
function onContentLoad(e) {

    //    animate our scroll
    $("#DerpGrid").find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}

我不确定是否

$("#DerpGrid").find(".k-grid-content")

适用于您正在使用的 Kendo 版本，但您可以使用 firebug 或 Telerik 的文档来确保您拥有正确的元素。

于 2013-10-10T19:15:55.020 回答