jquery - 初始化 Kendo Grid 分组
问题描述
有没有办法初始化已经按特定列分组的 Kendo Ui Grid(jQuery 版本)?看不到任何初始化选项或任何方法组来调用数据绑定。
提前致谢!
解决方案
绝对可以初始化按列分组的 Kendo Grid。这可以通过结合使用Kendo Grid 的可分组配置和 DataSource 中的组配置来实现。
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: {
data: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
group: [
{ field: "productName" }
]
},
groupable: true
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
推荐阅读
- google-sheets - 谷歌表格 VLOOKUP 返回多个值
- android - 如何启动多个 FlutterActivity?
- unity3d - 如何从 Blender 中导出 .dae 动画?
- ios - 创建类似于 iOS 联系人的 UI 编辑 UI
- python - 如何创建一组 tkinter 小部件(for 循环)并单独引用它们中的每一个?
- netlogo - 协助 Netlogo 中的节点/链接导航
- tensorflow - 自定义层输出 Keras 的尺寸
- jenkins - 如何在 Jenkins Job DSL 插件的上下文中使用共享/常见的 groovy 方法
- javascript - 多个源浏览器选项卡,单个目标选项卡
- oracle - 如何在没有按钮的情况下将项目值从一个页面传递到另一个页面?