javascript - Kendo UI Tabstrip:单击该选项卡内的按钮后,选项卡应呈现网格
问题描述
我有一个带有两个标签的标签条。在第一个选项卡中,我有一个名为“显示网格”的按钮。单击该按钮后,它将呈现一个网格以及一个后退按钮,以返回到仅包含“显示网格”按钮的上一个视图。问题是如何使用此返回按钮返回?
<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>
解决方案
试试这个,在这个例子中我使用了相同的按钮,但是按照相同的逻辑,你可以创建一个新的同时保留
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>
推荐阅读
- sql - 在 Postgres 中翻译 DECODE
- apache-kafka - Kafka:使用“SASL_PLAINTEXT”或“PLAINTEXT”协议时代理传输失败
- batch-file - 批处理/cmd如何复制名称特定的文件?
- python - 尝试使用 h5py 库在 python 中打开 .mat 文件时出现“文件存在”错误
- asp.net-core - 如何通过 Blazor 应用获取和发布数据?
- firebase-realtime-database - Firebase 实时数据库防止删除 - 基于条件
- c++ - STM32H7 SPI DMA传输,一直处于忙传输状态,HAL_SPI_STATE_BUSY_TX
- swift - Swift - UI 按钮:动画按钮越界
- javascript - 选中时切换悬停动画
- php - 将 HTML 表格添加到 PHP 邮件脚本中的问题