kendo

Web界面开发工具！Kendo UI for jQuery数据管理之锁定列

由 放肆的年华 提交于 2020-04-07 12:02:06
Kendo UI for jQuery R1 2020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 锁定（冻结）列使您可以在用户水平滚动网格时始终显示特定列。 有关可运行的示例，可参阅有关在Grid中实现锁定列的演示。 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <div

Kendo UI 字体公共样式修改

由 ⅰ亾dé卋堺 提交于 2020-04-05 22:22:55
声明： 　　本文为原创，为方便解答其他疑问者，如需转载请标明出处： http://www.cnblogs.com/ilaozhao/p/8808350.html 项目本身是由Kendo UI+pug文件开发，样式仍然引用的Kendo UI组件库样式，因此修改方法大致相同。如有出入，欢迎留言交流~ 　　代码块如下： div .table-panel-body.exposed-pager.　　　　　　//一些无用的样式 <div data-role="grid"　　　　　　　　　　//Kendo UI 格的应用 data-pageable="{　　　　　　　　　　　//配置底部分页显示 pageSize: 10,　　　　　　　　　　　//每页显示多条数据 refresh: true,　　　　　　　　　　//是否允许刷新 pageSizes: [10, 20, 50],　　　　//每页显示数据最大值 input: true　　　　　　　　　　　　//是否允许页面输入指定跳转值 }", data-scrollable="false"　　　　　　　//是否显示侧边滚动条 data-reorderable="true"　　　　　　　//是否允许行列调序 data-resizable="true",　　　　　　　　//未测出具体用法 data-auto-bind="false",　　　　　　　/

HTML5 开发工具Kendo UI Web中如何绑定网格到远程数据

由 六眼飞鱼酱① 提交于 2020-03-27 10:23:47
3 月，跳不动了？>>> 在前面的文章中对于 Kendo UI 中的Grid控件的一些基础的配置和使用做了一些介绍，本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据。 众所周知Grid网格控件是用户界面的一个重要的接口，尽管jQuery已经使得界面项目变得更加的容易，但是当网页设计时网格依旧是有一点玄乎。Kendo UI 中的Grid控件包含了快速模版引擎以及内置的数据源，使得我们可以非常快速的创建和运行网格。 创建Grid网格 在页面上首先需要一个网格，一个简单的描述了列表头的表格就可以了，如果你要自己做一个网格的话，你可以直接从表格开始。 >>>创建网格示例代码 添加一些Awesome数据 现在可以对网格添加一些实际的数据了，在Kendo UI中提供了一个强大的数据绑定框架，网格可以立即的在线使用。我们只需要简单的定义网格的数据源以及提供远程的端点即可。>>> 示例代码 运行上面的代码，将会得到一个空的网格。这个主要是因为我们没有告诉网格每列中出现什么东西，要解决这个问题，只需要简单在Instagram响应中 指定在特定列中要展示的元素。如下在列数组中指定了field属性，所以现在网格中将会从响应中显示实际的数据。 >>> 示例代码 （效果图） 现在有了数据，但是依然还有一些其他的问题。在网格中的图像列中有每个图像的URL链接，其他的列中显示的是对象的数组

Web界面开发工具！Kendo UI for jQuery数据管理之网格列宽

由 和自甴很熟 提交于 2020-03-27 10:15:08
3 月，跳不动了？>>> Kendo UI for jQuery R1 2020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 要设置Grid列的宽度，请使用其width属性。 当您通过col元素从HTML表创建网格时，也可以设置列的宽度；但是，当对表单元格使用宽度样式时，请避免这种方法。 使用列宽和滚动 根据是否启用滚动，网格的列会获得不同的操作： 默认情况下，在Kendo UI for jQuery，UI for JSP和PHP UI中为Grid启用了滚动。 启用滚动时： table-layout样式设置为fixed，并且所有未定义宽度的列均显示为相同宽度。 当水平空间不足时，没有定义宽度的列将缩小为零宽度。 无论单元格内容如何，都应遵守定义的列宽。 如果单元格的内容无法容纳，则网格将对其进行包装或修剪。 在调整列大小的过程中，只有调整大小的列和table才会更改其宽度。 调整列的大小或隐藏列时，网格将向其表元素应用像素宽度。 此操作有助于维持除当前已调整大小或隐藏的列之外的所有其余列的宽度

Web界面开发工具！Kendo UI for jQuery数据管理层次结构教程

由 一个人想着一个人 提交于 2020-03-18 11:23:17
某厂面试归来，发现自己落伍了！>>> Kendo UI for jQuery R1 2020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 状态持久性 Grid使您可以保存用户的自定义设置，并在用户将来再次登录后将其还原。 要保留以前应用于其结构的设置，请使用Grid的getOptions和setOptions方法。 这些方法允许您在需要时序列化Grid的当前状态，并在以后恢复该状态。 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js

Web界面开发工具！Kendo UI for jQuery数据管理使用：Selection

由 ≯℡__Kan透↙ 提交于 2020-03-12 10:48:52
Kendo UI for jQuery R12020 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 本文主要介绍如何使用Kendo UI for jQuery数据管理中的选择功能，默认情况下，禁用Grid中的选择。 注意 ：为提高Grid渲染大量项目和启用选择时的性能，请使用分页和合理的页面大小。 入门指南 要启用Grid的选择功能，请将selectable选项设置为true，结果将应用默认的单行选择功能。 $("#grid").kendoGrid({ selectable: true, // Other configuration. }); 图1：启用行选择的Grid 选择模式 Grid支持以下选择模式： 复选框列选择 单行选择 多行选择 单个单元格选择 多个单元格选择 注意 ： Grid不支持同时使用内置的复选框-列选择和通过selectable选项启用的选择。 若要在重新绑定的Grid中持久保存行选择，即在发生分页、筛选、排序、编辑或虚拟滚动时，请启用persistSelection属性。

Kendo UI开发教程：Kendo DataSource概述

由 本秂侑毒 提交于 2020-02-29 09:46:26
Kendo 的数据源支持本地数据源（JavaScript对象数组），或者远程数据源（XML, JSON, JSONP)，支持CRUD操作（创建，读取，更新和删除操作），并支持排序，分页，过滤，分组和集合等。 准备开始 下面创建一个本地数据源。 1 2 3 4 5 6 7 8 9 10 11 12 var movies = [ { title: “Star Wars: A New Hope”, year: 1977 }, { title: “Star Wars: The Empire Strikes Back”, year: 1980 }, { title: “Star Wars: Return of the Jedi”, year: 1983 } ]; var localDataSource = new kendo.data.DataSource({data: movies}); 创建一个远程数据源 （Twitter） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: “http: //search.twitter.com

Kendo UI常用示例汇总（一）

由 梦想与她 提交于 2020-02-29 06:06:08
< Kendo UI Professional试用版下载 > Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core ，有40+个框架和组件；商业版整合了之前的 Kendo UI Web 、 Kendo UI Mobile 和 Kendo UI DataViz ，一共有70+个框架和组件。作为Kendo UI的升级版，Kendo UI Professional既可以开发网页版应用程序，也可以开发移动版应用程序，并且在性能上也有显著的优化和提升。 Kendo UI Web在线演示一：网格(Grid)控件 这个在线示例展示了Kendo UI Web网格组件的列表数据和丰富的数据交互，包括分页、排序、分组和选择等。 Kendo UI Web在线演示二：日程(Scheduler)控件 本示例展示Kendo UI Web日程管理组件创建管理单个或多个循环任务，可以日、周、月或自定义的形式进行展示，支持触摸、鼠标和键盘操作。 Kendo UI Web在线演示三：编辑器(Editor) 在线体验Kendo UI Web强大的富文本编辑器，它拥有所见即所得的界面，生成的组件值由XHTML标记组成。 Kendo UI Web在线演示四：自动完成(AutoComplete) 在线体验Kendo UI Web输入的自动完成功能

Kendo UI开发教程：UI Widgets概述

由 流过昼夜 提交于 2020-02-29 05:53:41
Kendo UI 是基于jQuery 库开发的，Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo 的autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI组件是以 “kendoMobile?为前缀。比如：?kendoMobileListView?. 使用jQuery初始化Kendo UI组件 Kendo UI 组件使用页面上HTML元素来创建，使用CSS选择器 然后调用jquery插件（kendo UI组件）将这些HTML元素转换为Kendo UI组件（基本方法和jQuery UI类似）。 例如：初始化一个自动提示输入框组件（autocomplete) 1 2 3 4 < input id = "“autocomplete”" > < script > $(“#autocomplete”).kendoAutoComplete([“Apples”, “Oranges”, “Grapes”]); </ script > 其中 $(?#autocomplete?).kendoAutoComplete([?Apples?, ?Oranges?, ?Grapes?]); 完成两项任务： 查找Id为autocomplete的HTML元素，

Web UI开发神器—Kendo UI for jQuery数据管理之网格排序

由 人走茶凉 提交于 2020-02-27 11:33:06
Kendo UI for jQuery R3 2019 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 本文主要介绍如何使用Kendo UI for jQuery数据管理中的网格排序功能，默认情况下，禁用网格排序。 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <script
订阅 kendo