Kendo UI Tabstrip：Tab 應在單擊該選項卡內的按鈕后呈現網格

Question

我有一個帶有兩個標簽的標簽條。 在第一個選項卡中，我有一個名為“顯示網格”的按鈕。 單擊該按鈕后，它將呈現一個網格以及一個后退按鈕，以返回僅包含“顯示網格”按鈕的上一個視圖。 問題是我怎樣才能使用這個返回按鈕返回？

<body>

<div id="tabstrip">
  <ul>
    <li id="tab1">Tab 1</li>
    <li id="tab2">Tab 2</li>
  </ul>
  <div>
    <button class='k-button'>Show grid</button>
    <div id="button1"></div>
    <div id="grid"></div>
  </div>
  <div>Content 2</div>
</div>

<script>


  function grid() {
    $("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
});
  }

  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

   $(".k-button").one("click", function() {
     $("#button1").append('<button>Click</button>');
     grid();
     });

</script>
</body>

Answer 1

試試這個，在這個例子中我使用了相同的按鈕，但是按照相同的邏輯，你可以創建一個新的，同時保留兩個按鈕

 var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); var flag = true; $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: { data: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ] } }).hide(); $(".k-button").click(function () { if(flag === true){ $("#grid").show(); $(".k-button").text("Remove grid"); flag = false; } else { $("#grid").hide(); $(".k-button").text("Show grid"); flag = true; } });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> <style> .k-edit-form-container { width: 500px;} .k-popup-edit-form .k-edit-label { width: 20%; text-align: left; } .k-popup-edit-form .k-edit-field { width: 70%; } .k-popup-edit-form .k-edit-field > .k-textbox, .k-popup-edit-form .k-edit-field > .k-widget:not(.k-tooltip) { width: 98%; } </style> </head> <body> <div id="tabstrip"> <ul> <li id="tab1">Tab 1</li> <li id="tab2">Tab 2</li> </ul> <div> <button class='k-button'>Show grid</button> <div id="button1"></div> <div id="grid"></div> </div> <div>Content 2</div> </div> </body> </html>

Kendo UI Tabstrip：Tab 應在單擊該選項卡內的按鈕后呈現網格

問題描述

1 個解決方案

解決方案1
0 已采納 2020-01-08 10:45:56

Kendo UI Tabstrip：Tab 應在單擊該選項卡內的按鈕后呈現網格

問題描述

1 個解決方案

解決方案1 0 已采納 2020-01-08 10:45:56

解決方案1
0 已采納 2020-01-08 10:45:56