用于jQuery的Kendo :在网格列的每个单元格中显示两个不同控件中的一个
Kendo UI是一个用于构建现代化Web应用程序的跨平台UI组件库。它是一个基于jQuery的框架，提供丰富的UI组件和丰富的功能，包括网格（Grid）、表单（Form）、日历（Calendar）、图表（Chart）等。
对于在网格列的每个单元格中显示两个不同控件中的一个，Kendo UI提供了一个非常方便的解决方案。可以使用Kendo UI的模板功能来自定义每个单元格的呈现方式。通过在列定义中指定一个模板，可以在网格中的每个单元格中使用任意HTML和JavaScript代码。
以下是一个示例代码，展示了如何使用Kendo UI实现在网格列的每个单元格中显示两个不同控件中的一个：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.kendostatic.com/2021.3.1209/styles/kendo.default-v2.min.css" rel="stylesheet" />
<script src="https://cdn.kendostatic.com/2021.3.1209/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2021.3.1209/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function() {
var data = [
{ id: 1, name: "John", type: "text" },
{ id: 2, name: "Jane", type: "checkbox" },
{ id: 3, name: "Bob", type: "button" }
];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
type: { type: "string" }
}
}
}
},
columns: [
{ field: "id", title: "ID" },
{ field: "name", title: "Name" },
{
field: "type",
title: "Type",
template: function(dataItem) {
if (dataItem.type === "text") {
return '<input type="text" value="' + dataItem.name + '" />';
} else if (dataItem.type === "checkbox") {
return '<input type="checkbox" />';
} else if (dataItem.type === "button") {
return '<button>' + dataItem.name + '</button>';
}
}
}
]
});
});
</script>
</body>
</html>在上面的示例中，我们创建了一个包含三个数据项的数据源，并使用Kendo UI的网格组件来展示数据。在Type列的模板中，根据不同的类型，显示了不同的控件（文本框、复选框、按钮）。通过判断数据项的类型，可以根据需要在每个单元格中呈现不同的控件。
此外，Kendo UI还提供了丰富的文档和示例，可以帮助开发人员更好地了解和使用该库。您可以访问以下链接获取更多关于Kendo UI的详细信息：
Kendo UI官方网站：https://www.telerik.com/kendo-ui Kendo UI网格组件文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid Kendo UI网格组件示例：https://demos.telerik.com/kendo-ui/grid/index
相关·内容
我把剑道用在jQuery上。我有一个网格，其中列的每个单元格都需要显示下拉控件或文本输入控件。我在这里找到了一种方法，可以在给定列的所有单元格中显示一个或另一个单元格，而不是逐行、逐个单元格地显示。"
浏览 30提问于2021-11-04得票数 0
2回答
到托管该元素的父“网格提供者”组件，以便多个网格用户可以呈现相同的网格，而每个用户都不必配置分页、排序等。
我的应用程序提供了搜索不同种类产品的能力。所有搜索结果都显示在用于Angular grid的Kendo UI中。每种产品都有不同的字段显示在搜索结果中
浏览 26提问于2018-08-18得票数 1
回答已采纳
我正在尝试创建一个项目列表(两列)，第一列是我的项目，第二列是可单击的详细信息，所以当我单击详细信息时，我想打开另一个绑定所有相应详细信息的网格，你知道如何使用Kendo或其他工具创建第一个网格吗？
浏览 10提问于2017-06-16得票数 0
回答已采纳
1回答
我有kendo网格，其中一个列映射到varchar表列。数据不适合一行，因此表单元格被包装(导致表行为多行)。我还有jquery函数，它在页面加载后获取varchar/string，并用一个较短的子字符串替换值(将其改为一行，而不是多行)。这个函数只适用于某些用户，而不是所有的用户。each(function () {
this.outerHTML = this.innerHTML.substring(0, this
浏览 7提问于2022-11-04得票数 1
在角2 Kendo网格中，当用户打开细节模板时，我需要在每个单元格中显示额外的信息。在用于jQuery的Kendo中，我可以使用详细信息()事件来完成我需要的任务，但是Angular2组件中没有这样的事件。<kendo-grid-column>
<
浏览 3提问于2016-12-30得票数 0
回答已采纳
我在一个视图上使用了kendo UI网格，它是使用knockout for mvvm的duandal2.0应用程序的一部分。在特定视图上，需要显示具有动态列数的kendo网格，因此每次访问视图时，网格列可能具有与上次访问不同的计数。现在，由于启用了缓存(也适用于此视图)，因此对于后续访问，<e
浏览 0提问于2014-03-02得票数 0
我在kendo ui网格中动态添加列。在网格的顶部，默认文本显示为“拖动列标题并将其放在此处以按该列分组”。
在网格的页脚显示分页详细信息，包括用于导航的图标。但是，网格没有在顶部和底部显示边框，这意味着在网格顶部显示的默
浏览 0提问于2013-06-11得票数 0
回答已采纳
由于kendo本身没有单元格模板，所以我决定在kendo网格中向每个单元格添加一个数据属性。我需要一个kendo网格中每个元素的“数据列”属性，这样每个元素都可以用columns.field名称进行唯一标识。
有没有现成的办法来做这件事？
浏览 2提问于2015-06-03得票数 0
回答已采纳
我在Silverlight 4 Datagrid中有大约6列。在数据网格中的每个单元格上，我们都显示了一些自定义控件。现在，我应该允许用户从每列中选择一个控件。一旦他们从每一列中选择了一个控件，然后将转到并单击OK按钮来执行一些工作。需要注意的是，他可能会从不同的列<
浏览 0提问于2012-04-06得票数 0
回答已采纳
2回答
我有一个要求，我必须在kendo网格的可过滤单元格中显示两个下拉列表。这两个下拉列表将过滤剑道网格中的两个不同的列。有一个想法是，我有一个模板，它可能是一些kendo容器，比如某个面板，然后在这个容器中添加两个下拉列表。
浏览 3提问于2015-07-03得票数 2
回答已采纳
我有一个基于以下结构的kendo网格： Sub Group A -Data B-Sub Group C Sub Group A Sub Group C
我有一只剑道
浏览 1提问于2017-02-16得票数 2
2回答
是否有一种方法来创建网格列的自定义实现？
我不想创建包装器或类似的东西，它应该是从kendo网格列继承的类/组件。这是已经有可能的测试版，还是计划中的一个即将发布？
浏览 3提问于2016-10-18得票数 0
回答已采纳
4回答
如果希望在FireMonkey网格的同一列中使用不同的单元格控件，该怎么办？单元格控件似乎属于列，但在某些情况下(如属性编辑器)，某些行需要复选框，而其他行需要组合框或编辑控件。
提前谢谢。
浏览 1提问于2012-05-30得票数 3
回答已采纳
1回答
我必须开发一个小的应用程序，我必须创建一个用户控件，这是一个类似于表视图的东西。
在加载表单时，应该询问用户表单上所需的列的行数。一旦用户设置了单元格的数量，每个单元格都应该有一个按钮和一个文本框(组合在一起)。请帮助我创建用户控件。我还是个初学者。谢谢!
浏览 2提问于2010-09-27得票数 0
回答已采纳
按照要求，我的VIEW.But上有一个Kendo网格，controller.This中的读取函数没有被击中是很烦人的，我也遇到了同样的问题，尽管每件事似乎都与上提供的文档相同。以下是我的视图代码：.Name("studentsGrid")
.Column
浏览 8提问于2013-08-18得票数 4
回答已采纳
1回答
我想做的是：
- This Kendo UI Grid control has 8 columns in which 2 columns has a Kendo dropdownlist单击
浏览 3提问于2013-02-19得票数 1
回答已采纳
我有一些页面有一个kendo ui网格(连接到完整的CRUD服务)，但是使用单独的Kendo工具栏控件(相对于网格本身的工具栏配置)。工具栏上有许多不同的按钮/菜单，但在网格上调用saveChanges()时，我看到了一种奇怪的行为。如果单击“保存”按钮时正在编辑单元格，则网格将被保存，但已编辑的值将
浏览 2提问于2014-10-30得票数 1
回答已采纳
我在kendo网格中使用锁定和解锁的列，当我单击一个单元格时，编辑事件就会发生。问题是，由于网格被分成两部分(由于锁定和解锁的列)，我无法确定当前编辑单元格正在哪个表中编辑……
例如:我单击Name列中的单元格，其索引为0，然后单击gender列中的
浏览 14提问于2019-10-25得票数 0
回答已采纳
4回答
首先，我想要的是:能够显示包含多列的网格，每个单元格都有一个自定义的呈现回调。因此，你可以在游戏中使用这样的控件来显示你的库存，或者像Google Chrome中的行为一样，它会显示你访问的热门页面的网格。该控件有与列相关
浏览 1提问于2009-10-27得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
