[英]Kendo UI Tabstrip: Tab should render a grid after clicking on a button inside that tab
I have a tabstrip with two tabs.我有一个带有两个标签的标签条。 In the first tab, I have button named "Show grid".
在第一个选项卡中,我有一个名为“显示网格”的按钮。 After clicking that button it will render a grid along with a back button to go back to the previous view that contained only the "show grid" button.
单击该按钮后,它将呈现一个网格以及一个后退按钮,以返回仅包含“显示网格”按钮的上一个视图。 The problem is how can I go back using this back button?
问题是我怎样才能使用这个返回按钮返回?
<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>
Try this , in this example I used the same button, however following the same logic you can create a new one keeping both试试这个,在这个例子中我使用了相同的按钮,但是按照相同的逻辑,你可以创建一个新的,同时保留两个按钮
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.