当前位置: 首页 > news >正文

Kendo UI for jQuery---03.组件___网格---02.开始

网格入门

本指南演示了如何启动和运行 Kendo UI for jQuery Grid。

完成本指南后,您将能够实现以下最终结果:
在这里插入图片描述

1. 创建一个空的 div 元素

首先,在页面上创建一个空元素,该元素将用作 Grid 组件的主容器。

<div id="my-grid"></div>

2. 初始化网格

在此步骤中,您将从空元素初始化网格。当你从空初始化组件时,网格的所有设置都将在初始化脚本语句中提供,你必须用JavaScript描述它的布局和配置。div

有关替代初始化方法的详细信息,请参阅有关从 HTML 表初始化网格的文章。

<div id="my-grid"></div><script>// Target the div element by using jQuery and then call the kendoGrid() method.$("#my-grid").kendoGrid({// Add some basic configurations such as width and height.width: "700px",height: "400px"});
</script>

3. 将网格绑定到数据

基本初始化完成后,可以开始向网格添加其他配置。第一个也是最重要的配置是dataSource.

<div id="my-grid"></div><script>let myDataArray = [{ID: 1, Name: "Tom", Date: "10/15/2022"},{ID: 2, Name: "John", Date: "11/25/2022"},{ID: 3, Name: "Annie", Date: "05/09/2022"},{ID: 4, Name: "Rachel", Date: "08/06/2022"},{ID: 5, Name: "Klemens", Date: "10/07/2022"},{ID: 6, Name: "Micah", Date: "05/19/2022"},{ID: 7, Name: "Junie", Date: "04/04/2022"},{ID: 8, Name: "Krishnah", Date: "07/19/2022"},{ID: 9, Name: "Enrichetta", Date: "01/11/2022"},{ID: 10, Name: "Marten", Date: "02/13/2022"},{ID: 11, Name: "Rosmunda", Date: "08/15/2022"},];// Target the div element by using jQuery and then call the kendoGrid() method.$("#my-grid").kendoGrid({width: "700px",height: "400px",dataSource: {data: myDataArray,schema: {model: {id: "ID", // The ID field is a unique identifier that allows the dataSource to distinguish different elements.fields: {ID: { type: "number", editable: false }, // The ID field in this case is a number. Additionally, do not allow users to edit this field.Name: { type: "string", editable: false },Date: { type: "date", editable: false }}}}}});
</script>

4. 配置网格列

网格允许您配置每个单独的列并应用一组列属性。

<div id="my-grid"></div><script>let myDataArray = [{ID: 1, Name: "Tom", Date: "10/15/2022"},{ID: 2, Name: "John", Date: "11/25/2022"},{ID: 3, Name: "Annie", Date: "05/09/2022"},{ID: 4, Name: "Rachel", Date: "08/06/2022"},{ID: 5, Name: "Klemens", Date: "10/07/2022"},{ID: 6, Name: "Micah", Date: "05/19/2022"},{ID: 7, Name: "Junie", Date: "04/04/2022"},{ID: 8, Name: "Krishnah", Date: "07/19/2022"},{ID: 9, Name: "Enrichetta", Date: "01/11/2022"},{ID: 10, Name: "Marten", Date: "02/13/2022"},{ID: 11, Name: "Rosmunda", Date: "08/15/2022"},];$("#my-grid").kendoGrid({width: "700px",height: "400px"// The columns configuration is an array of objects.columns: [// The field matches the ID property in the data array.{ field: "ID", title: "Personal Id", width: "70px" },{ field: "Name", title: "First Name", width: "150px" },{ field: "Date", title: "Hire Date", width: "200px", format: "{0:dd-MM-yyyy}" }],dataSource: {data: myDataArray,schema: {model: {id: "ID",fields: {ID: { type: "number", editable: false },Name: { type: "string", editable: false },Date: { type: "date", editable: false }}}}}});
</script>

5.添加编辑和过滤

除其他功能外,网格还支持编辑和过滤。编辑配置允许用户编辑单个网格单元格。筛选配置允许用户筛选网格内的数据。

<div id="my-grid"></div><script>let myDataArray = [{ID: 1, Name: "Tom", Date: "10/15/2022"},{ID: 2, Name: "John", Date: "11/25/2022"},{ID: 3, Name: "Annie", Date: "05/09/2022"},{ID: 4, Name: "Rachel", Date: "08/06/2022"},{ID: 5, Name: "Klemens", Date: "10/07/2022"},{ID: 6, Name: "Micah", Date: "05/19/2022"},{ID: 7, Name: "Junie", Date: "04/04/2022"},{ID: 8, Name: "Krishnah", Date: "07/19/2022"},{ID: 9, Name: "Enrichetta", Date: "01/11/2022"},{ID: 10, Name: "Marten", Date: "02/13/2022"},{ID: 11, Name: "Rosmunda", Date: "08/15/2022"},];$("#my-grid").kendoGrid({width: "700px",height: "400px"// Add toolbar buttons for creating and saving buttons.toolbar: ["create", "save"],// Enable the filtering functionality.filterable: true,// Enable the editing functionality (incell by default).editable: true,// The columns configuration is an array of objects.columns: [// The field matches the ID property in the data array.{ field: "ID", title: "Personal Id", width: "70px" },{ field: "Name", title: "First Name", width: "150px" },{ field: "Date", title: "Hire Date", width: "200px", format: "{0:dd-MM-yyyy}" }],dataSource: {data: myDataArray,schema: {model: {id: "ID",fields: {ID: { type: "number", editable: false },Name: { type: "string", editable: false },Date: { type: "date", editable: false }}}}}});
</script>



完整代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格入门</title><link href="../../../../styles/kendo.common.min.css" rel="stylesheet" /><link href="../../../../styles/kendo.default.min.css" rel="stylesheet" /><script src="../../../../js/jquery.min.js"></script><script src="../../../../js/kendo.web.min.js"></script>
</head>
<!-- 本指南演示了如何启动和运行 Kendo UI for jQuery Grid。 --><body><!-- 1. 创建一个空的 div 元素首先,在页面上创建一个空元素,该元素将用作 Grid 组件的主容器。 --><div id="my-grid"></div><script>/** 3. 将网格绑定到数据基本初始化完成后,可以开始向网格添加其他配置。第一个也是最重要的配置是dataSource.*/let myDataArray = [{ ID: 1, Name: "Tom", Date: "10/15/2022" },{ ID: 2, Name: "John", Date: "11/25/2022" },{ ID: 3, Name: "Annie", Date: "05/09/2022" },{ ID: 4, Name: "Rachel", Date: "08/06/2022" },{ ID: 5, Name: "Klemens", Date: "10/07/2022" },{ ID: 6, Name: "Micah", Date: "05/19/2022" },{ ID: 7, Name: "Junie", Date: "04/04/2022" },{ ID: 8, Name: "Krishnah", Date: "07/19/2022" },{ ID: 9, Name: "Enrichetta", Date: "01/11/2022" },{ ID: 10, Name: "Marten", Date: "02/13/2022" },{ ID: 11, Name: "Rosmunda", Date: "08/15/2022" },];/** 2. 初始化网格在此步骤中,您将从空元素初始化网格。当你从空初始化组件时,网格的所有设置都将在初始化脚本语句中提供,你必须用JavaScript描述它的布局和配置。<div>div */$("#my-grid").kendoGrid({width: "700px",height: "400px",/** 5.添加编辑和过滤除其他功能外,网格还支持编辑和过滤。编辑配置允许用户编辑单个网格单元格。筛选配置允许用户筛选网格内的数据。*/// Add toolbar buttons for creating and saving buttons.toolbar: ["create", "save"],// Enable the filtering functionality.filterable: true,// Enable the editing functionality (incell by default).editable: true,// The columns configuration is an array of objects./** 4. 配置网格列网格允许您配置每个单独的列并应用一组列属性。*/// The columns configuration is an array of objects.columns: [// The field matches the ID property in the data array.{ field: "ID", title: "Personal Id", width: "70px" },{ field: "Name", title: "First Name", width: "150px" },{ field: "Date", title: "Hire Date", width: "200px", format: "{0:dd-MM-yyyy}" }],dataSource: {data: myDataArray,schema: {model: {id: "ID",fields: {ID: { type: "number", editable: false },Name: { type: "string", },Date: { type: "date",  }}}}}});</script>
</body></html>

相关文章:

Kendo UI for jQuery---03.组件___网格---02.开始

网格入门 本指南演示了如何启动和运行 Kendo UI for jQuery Grid。 完成本指南后&#xff0c;您将能够实现以下最终结果&#xff1a; 1. 创建一个空的 div 元素 首先&#xff0c;在页面上创建一个空元素&#xff0c;该元素将用作 Grid 组件的主容器。 <div id"my-…...

初识Telegraf、InfluxDB和Grafana铁三角形成的监控可视化解决方案

文章目录 前言原始的监控靠人盯进化的监控靠批处理脚本高端的监控靠完整的可视化解决方案Telegraf、InfluxDB和Grafana铁三角TelegrafInfluxDBGrafana Grafana仪表板展示服务器资源总览负载和内存使用网络带宽磁盘IOIO延迟其他指标进程信息 总结 前言 数据监控目前用于各行各业…...

【哈佛积极心理学笔记】第20课 幸福与幽默

第20课 幸福与幽默 The vanguard of the positive psychology revolution: Our brain is basically a single processor, capable of consciouly choosing to devote resources either to the pain and suffering on one side, or viewing the world that lens of something l…...

设计模式-责任链模式

责任链模式 请求发送者和接收者连接成一条链&#xff0c;一个对象处理完&#xff0c;交给下一位&#xff0c;沿着链传递请求&#xff0c;这就是责任链模式。 角色 抽象处理者&#xff08;Handler&#xff09; 定义了处理请求的方法具体处理者&#xff08;ContreteHandler&am…...

不变的是需求,变化的是解决方法和工具:探讨iPaaS与ESB的差异

在企业数字化转型过程中&#xff0c;企业需要面临日益复杂的业务和数据集成挑战。为了应对这些挑战&#xff0c;需要借助适当的解决方法和工具来实现系统间的通信和数据传输。在这方面&#xff0c;iPaaS&#xff08;Integration Platform as a Service&#xff09;和ESB&#x…...

网络解析----faster rcnn

Faster R-CNN&#xff08;Region-based Convolutional Neural Network&#xff09;是一种基于区域的卷积神经网络用于目标检测任务的模型。它是一种两阶段的目标检测方法&#xff0c;主要包含以下几个步骤&#xff1a; Region Proposal Network&#xff08;RPN&#xff09;: F…...

modbus TCP协议讲解及实操

具体讲解 前言正文modbus tcp主机请求数据基本讲解Modbus Poll工具简单使用讲解 modbus tcp从机响应数据Modbus Slave工具简单使用讲解 前言 关于modbus tcp从0到1的讲解&#xff0c;案例结合讲解&#xff0c;详细了解整个modbus的可以参考这个&#xff1a;详解Modbus通信协议…...

既有内销又有外贸,多样性外贸业务管理解决方案

随着外贸数字化贸易全球化的深入发展&#xff0c;出口、进口、内销业务越来越受到关注。外贸业务是企业在海外市场进行商品贸易&#xff0c;而内销业务是企业在国内市场进行商品贸易。在管理这种业务时&#xff0c;想要实现降本增效&#xff0c;企业需要有一套成熟的管理解决方…...

spring eurake中使用IP注册

在开发spring cloud的时候遇到一个很奇葩的问题&#xff0c;就是服务向spring eureka中注册实例的时候使用的是机器名&#xff0c;然后出现localhost、xxx.xx等这样的内容&#xff0c;如下图&#xff1a; eureka.instance.perferIpAddresstrue 我不知道这朋友用的什么spring c…...

c# 从零到精通 form界面之listView控件

c# c# 从零到精通 form界面之listView控件 添加值 设置值 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace Test06 { public partial cla…...

Qt6.5.1+WebRTC学习笔记(十二)环境搭建流媒体服务器(ubuntu22.04+SRS)

前言 若只是实现一对一通信&#xff0c;仅使用webrtc就足够了。但有时间需要进行多个人的直播会议&#xff0c;当人比较多时&#xff0c;建议使用一个流媒体服务器&#xff0c;笔者使用的是SRS。 这个开源项目资料比较全&#xff0c;笔者仅在此记录下搭建过程 一、准备 1.操…...

LeetCode 9. 回文数

LeetCode 9. 回文数 一、题目描述&#xff1a; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数…...

Linux系统之部署Teleport堡垒机系统

Linux系统之部署Teleport堡垒机系统 一、Teleport介绍1.1 Teleport简介1.2 Teleport特点1.3 支持操作系统 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本 四、部署teleport服务端4.1 创建部署目录4.2 下载t…...

【二叉树part02】| 102.二叉树的层序遍历、226.翻转二叉树、101.对称二叉树

目录 ✿LeetCode102.二叉树的层序遍历❀ ✿LeetCode226.翻转二叉树❀ ✿LeetCode101.对称二叉树❀ ✿LeetCode102.二叉树的层序遍历❀ 链接&#xff1a;102.二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff…...

【干货】Android系统定制基础篇:第十五部分(Android支持鼠标右键返回、GPIO 控制方案、属性标识USB摄像头的VID与PID)

1、修改 frameworks/native/services/inputflinger/InputReader.cpp 如下&#xff1a; diff --git a/frameworks/native/services/inputflinger/InputReader.cpp b/frameworks/native/services/inputflinger/Inp index 7207a83..2721800 100755 --- a/frameworks/native/servi…...

ubuntu18 修改dns服务器地址为google

域名解析被干扰的有点严重&#xff0c;直接使用谷歌dns服务器来解析ip 第一、永久修改DNS方法 1、修改 /etc/systemd/resolved.conf 文件 vi /etc/systemd/resolved.conf这里我们可以看到这些参数&#xff1a; # 指定 DNS 服务器&#xff0c;以空白分隔&#xff0c;支持 IP…...

RHCE shell 作业一

1. 设置邮箱 [rootserver ~]# yum install s-nail -y [rootserver ~]# vim /etc/s-nail.rc 编写脚本 [rootserver ~]# vim homework1.sh 设置定时任务 [rootserver ~]# vim /etc/crontab 2. [rootserver ~]# vim homework2.sh 测试&#xff1a; 3. [rootserve…...

Qqis中采用栅格工具生成XYZ瓦片(目录)简介

目录 前言 一、Qgis的相关功能 1、数据准备 2、将两个xyz图源添加到图层 二、Qgis栅格工具生成 1、生成xyz图块工具在哪里 2、生成xyz图块怎么用 3、下载结果 4、Leaflet加载离线瓦块 总结 前言 在上一篇博客中&#xff0c;介绍了一种在Qgis中基于QMetaTiles插件进行xyz瓦…...

【Axure教程】根据标签数自动调整尺寸的多选下拉列表

​多选下拉列表常用于需要用户从一组选项中选择多个选项的情况。它提供了一个下拉菜单&#xff0c;用户可以点击展开并选择他们感兴趣的多个选项。多选下拉列表可以用于展示可选标签&#xff0c;并允许用户选择多个标签。例如&#xff0c;在一个博客发布界面上&#xff0c;可以…...

【python】js逆向基础案例——有道翻译

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 课程亮点: 1、爬虫的基本流程 2、反爬的基本原理 3、nodejs的使用 4、抠代码基本思路 环境介绍: python 3.8 pycharm 2022专业版 >>> 免费使用教程文末名片获取 requests >>> pip install req…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...