技术笔记:Kendo框架

简介: 技术笔记:Kendo框架

目录


在ASP.NETCore使用Kendo的jQuery组件版下载 Kendo引入kendoGrid:表格Configuration:配置Methods:方法Events:事件数据显示前处理示例Upload:上传组件TreeView:树型视图示例Configuration:配置Methods:方法Events:事件MultiColumnComboBox:多列组合框DropDownList:下拉选择框使用官网入门示例


参考:


官网


Kendo Query组件版地址


全部组件概述Overview


入门


kendo ui grid 汉化


Kendo MVC组件版地址


Grid


Grid 导出EXCLE


回到顶部在ASP.NETCore使用Kendo的jQuery组件版


下载 Kendo


点击 下载地址 ,下载后解压,把解压后的文件夹改名为kendo


引入kendo


把kendo文件夹复制到项目的wwwroot/lib文件夹下,然后在_Layout.cshtml视图的标签中引入kendo文件和jQuery文件。


注意:jquery.min.js一定要在kendo.all.min.js上面,否则会失败,应该是它内部有调用jQuery脚本,具体如下:


[/span>link href="~/lib/kendo/styles/kendo.common.min.css" rel="stylesheet" />


[/span>link href="~/lib/kendo/styles/kendo.default.min.css" rel="stylesheet" />


[/span>script src="~/lib/jquery/dist/jquery.min.js"

[/span>script src="~/lib/kendo/js/kendo.all.min.js"

回到顶部Grid:表格


参考:


Grid API


Grid 概述OverView


Configuration:配置


dataSource:数据源


schema:用于解析远程服务响应的配置


data:服务器响应中包含数据项的字段。可以设置为一个函数,该函数被调用以返回响应的数据项。


指定数据,当DataSource返回的数据源中有多个对象时,只使用其中一个对象时必须使用data


也可以是一个函数


height:高


scrollable:滚动


sortable:排序


filterable:过滤


显示中文:


pageable:分页


detailTemplate:详细模板


select:绑定函数


sortable:true,点击表头排序


resizable:列宽可调整


columns:列


field:绑定字段


title:列名


Methods:方法


Events:事件


detailInit:表格初始化


数据显示前处理


使用 parse :


使用模板:在模板的HTML内写js代码处理


示例


简单版Grid:


[/span>div id="MyGrid"

[/span>script

$(function () {


$("#MyGrid").kendoGrid({


dataSource:



{ id: 1, code: "01", name: "测试1" },


{ id: 2, code: "02", name: "测试2" }


】,


columns: 【{ field: "id" }, { field: "code" }, { field: "name" }】


})


})



回到顶部Upload:上传组件


参考:Upload


官网示例是上传文件时同时提交表单数据


回到顶部TreeView:树型视图


参考:


TreeView API


TreeView 概述OverView


示例


TreeView简单版:


[/span>div id="treeView"

[/span>script

$(document).ready(function () {


//代码效果参考:http://hnjlyzjd.com/hw/wz_24819.html

$("#treeView").kendoTreeView({

dataSource: 【


{


text: "Item 1",


items: 【


{ text: "Item 1.1" },


{ text: "Item 1.2" }



},


{ text: "Item 2" }



})


});



Configuration:配置


template:模板


dataSource:数据源


checkboxes:复选框设置


checkChildren:指示在选中父项的复选框时是否应选中子项的复选框


template:复选框模板


name:复选框name


Methods:方法


Events:事件


change:更改时触发


回到顶部MultiColumnComboBox:多列组合框


参考:MultiColumnComboBox API


回到顶部DropDownList:下拉选择框


参考:DropDownList API


回到顶部使用官网入门示例


kendo版本、图形显示、表格显示(排序、过滤、分页),效果如下:


注意:该$(function() { });代码块是一个jQuerydocument.ready处理程序。除了6中的模板功能。使用模板,本指南中的所有JavaScript代码都必须放在此闭包中。


使用了kendo的jquery组件


kendo.version:获取kendo版本


kendoButton:点击按钮


kendoChart:图形


kendoGrid:表格


以下代码来源于 官网入门


@页面:Kendo jQuery组件没有使用kendo的UI,仅仅是使用标签的id@


获取版本:kendo.version


Kendo版本:

------------------------------------------------------------------------------------


使用图形:kendoChart



------------------------------------------------------------------------------------


使用按钮:kendoButton


相关文章
|
6月前
|
Scala 前端开发 开发者
Play Framework模板引擎大对决:Twirl的魔力与Mustache的简约,谁才是真正的王者?
【8月更文挑战第31天】刘杰是一位软件开发工程师,在基于高性能Web框架Play Framework的新项目中负责前端页面开发。在个人博客里,他详细比较了Play Framework提供的两种内置模板引擎——Twirl与Mustache。Twirl为Play默认模板引擎,使用Scala编写,具备强大的功能与灵活性;而Mustache是一个无逻辑的模板引擎,适用于多种编程语言,使用双花括号表示变量。
61 0
|
9月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
154 3
QGS
|
9月前
|
缓存 JavaScript 安全
手摸手Element-Plus组件化开发
手摸手Element-Plus组件化开发
QGS
111 1
|
前端开发 JavaScript
前端——Kendo UI的一些知识点
前端——Kendo UI的一些知识点
|
前端开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
前端项目实战玖-pad端mui使用网络请求利用原生开发
103 0
|
JavaScript 前端开发 架构师
「首席架构师精选」JavaScript图表库的比较
「首席架构师精选」JavaScript图表库的比较
「首席架构师精选」JavaScript图表库的比较
|
前端开发
【前端三件套-CSS】基础入门必备
【前端三件套-CSS】基础入门必备
273 0
【前端三件套-CSS】基础入门必备
|
JavaScript 前端开发 容器
学习使用YUI3
以下只是在YUI学习和使用中零碎的一些心得体会,未成体系,发出来,供批判。 1、利用 Font、Base、Grid CSS进行快速的网页布局。 对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目自己都去写一些CSS。
1039 0
学习使用YUI3

热门文章

最新文章