技术笔记：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

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