jQuery的剑道UI的第一步
欢迎来到剑道jQuery UI入门指南!
本指南演示了如何通过添加所需的资源和初始化组件来开始使用套件剑道UI网格．
该过程涉及以下里程碑:
1.下载控件
登录后可以快速下载jQuery控件的剑道UI你的Telerik账户．
2.添加所需的JavaScript和CSS文件
首先，将Kendo UI资产添加到HTML文档中。在本例中，您将使用剑道UI CDN服务．在其他情况下，您可能希望这样做在本地托管文件．
总是在使用Kendo UI脚本之前注册jQuery—否则，您将得到JavaScript错误当您尝试初始化剑道UI组件或使用剑道UI API时。
要确保所有脚本都已加载，请调用一个简单的API来呈现剑道UI版本．
的
$(function() {});代码块是jQuerydocument.ready处理程序。本指南中的所有JavaScript代码都必须放在这个闭包中。
' ' ' html < script src="//www.aliitrade.com/kendo.cdn/2022.3.1109/mjs/kendo.all.js" type="module"> < script src="//www.aliitrade.com/kendo.cdn/2022.3.1109/js/kendo.all.min.js"> ' ' '3.将网格绑定到数据
您现在将创建一个剑道UI数据源使用一些稍后将用于绑定网格的虚拟命令。
硬编码的数据项数组是创建类的最简单方法数据源．在现实生活中，你可能想要取远程数据或配置编辑(CRUD操作)．
为保证数据操作的正确实施，需要对数据字段类型．此外，您将申请一个页面大小还有一个默认值排序通过向数据库．
var orderData = [{OrderID: 1, OrderDate: "2017-11-06T12:00:00"，运费:12.34,ShipCity: "安特卫普"，ShipCountry: "比利时"}，{OrderID: 2, OrderDate: "2019-03-02T12:00:00"，运费:23.45,ShipCity: "新加坡"，ShipCountry: "新加坡"}，{OrderID: 3, OrderDate: "2019-06-26T12:00:00"，运费:34.56,ShipCity: "上海"，ShipCountry: "中国"}，{OrderID: 4, OrderDate: "2017-09-20T12:00:00"，运费:45.67,ShipCity: "汉堡"，ShipCountry: "德国"}，{OrderID: 5, OrderDate::“2017-12-12T12:00:00”，运费:56.78,ShipCity:“孟买”，ShipCountry:“印度”}，{OrderID: 6, OrderDate:“2018-02-08T12:00:00”，运费:67.89,ShipCity:“上海”，ShipCountry:“中国”}，{OrderID: 7, OrderDate:“2018-05-05T12:00:00”，运费:78.90,ShipCity:“东京”，ShipCountry:“日本”}，{OrderID: 8, OrderDate:“2019-08-03T12:00:00”，运费:89.01,ShipCity:“巴生港”，ShipCountry:“马来西亚”}，{OrderID: 9, OrderDate:“2018-10-29T12:00:00”，运费:90.12,ShipCity:“印度”}，{OrderID: 9, OrderDate:“2018-10-29T12:00:00”;"鹿特丹"，ShipCountry: "荷兰"}，{OrderID: 10, OrderDate: "2018-01-23T12:00:00"，运费:10.32,ShipCity: "温哥华"，ShipCountry: "加拿大"}，{OrderID: 11, OrderDate: "2018-04-17T12:00:00"，运费:21.43,ShipCity: "Colón"， ShipCountry: "巴拿马"}，{OrderID: 12, OrderDate: "2017-07-11T12:00:00"，运费:32.54,ShipCity: "马尼拉"，ShipCountry: "菲律宾"}，{OrderID: 13, OrderDate: "2017-10-24T12:00:00"，运费:43.65,ShipCity: "新加坡"，ShipCountry: "加拿大":“新加坡”}，{OrderID: 14, OrderDate:“2018-03-11T12:00:00”，运费:54.76,ShipCity:“釜山”，ShipCountry:“韩国”}，{OrderID: 15, OrderDate:“2018-06-17T12:00:00”，运费:65.87,ShipCity:“深圳”，ShipCountry:“中国”}，{OrderID: 16, OrderDate:“2018-10-13T12:00:00”，运费:76.98,ShipCity:“香港”，ShipCountry:“中国”}，{OrderID: 17, OrderDate:“2019-04-19T12:00:00”，运费:87.09,ShipCity:“迪拜”，ShipCountry:“阿联酋”}，{OrderID: 18, OrderDate:"2019-07-25T12:00:00"，运费:98.21,ShipCity: "Felixstowe"， ShipCountry: "UK"}， {OrderID: 19, OrderDate: "2017-09-22T12:00:00"，运费:13.24,ShipCity: "Los Angeles"， ShipCountry: "USA"}， {OrderID: 20, OrderDate: "2018-12-09T12:00:00"，运费:35.46,ShipCity: "New York"， ShipCountry: "USA"}， {OrderID: 21, OrderDate: "2018-02-04T12:00:00"，运费:57.68,ShipCity: "Guangzhou"， ShipCountry: "China"}， {OrderID: 22, OrderDate: "2019-05-16T12:00:00"，运费:9.87,ShipCity:"Long Beach"， ShipCountry: "USA"}， {OrderID: 23, OrderDate: "2019-08-18T12:00:00"， Freight: 24.13, ShipCity: "Singapore"， ShipCountry: "Singapore"}];var gridDataSource = new kendo.data。DataSource({data: orderData, schema: {model: {fields: {OrderID: {type: "number"}， Freight: {type: "number"}， OrderDate: {type: "date"}， ShipCountry: {type: "string"}， ShipCity: {type: "string"}}}}， pageSize: 10, sort: {field: "OrderDate"， dir: "desc"}});4.初始化网格
现在你准备好了初始化一个剑道UI网格．首先，添加一个new< div >元素添加到页面。
< div id = " ordersGrid " > < / div >下面的代码片段包含JavaScript代码创建组件实例使用已定义的数据源．的后面放置代码gridDataSource定义。有关当前步骤之后页的可运行版本，请参见这个演示．
$ (" # ordersGrid”)。kendoGrid({数据源:gridDataSource});5.配置网格
至此，您已经填充了Kendo UI Grid。但是，您需要改进和润色其性能，例如:
下面的示例演示了更新后的Grid配置。
$ (" # ordersGrid”)。kendoGrid({dataSource: gridDataSource，高度:400，可分页:true，可排序:true，可过滤:true，列:[{field:"OrderID"，标题:"订单ID"，宽度:160}，{field:"运费"，宽度:160，}，{field:" OrderDate"，标题:"订单日期"，宽度:200，}，{field:" ShipCountry"，标题:" ShipCountry"}， {field:" ShipCity"，标题:" ShipCity"}]});下面的可运行示例演示了您将根据本教程创建和构建的页面的最终版本。
< !负责人html DOCTYPE html > < > < > < meta charset = " utf - 8 " / > <标题>开始使用剑道为jQuery UI < /名称> <链接的href = " https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css " rel = "样式表" / > < script src = " https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js " > < /脚本> < script src = " https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js " > < /脚本> < /头> <身体> < div id = " ordersGrid " > < / div > <脚本> $(函数(){var orderData = [{OrderID: 1、向数据库:“2017-11-06T12:00:00”，运费:12.34,ShipCity:“安特卫普”，ShipCountry:“比利时”}，{OrderID: 2, OrderDate:“2019-03-02T12:00:00”，运费:23.45,ShipCity:“新加坡”，ShipCountry:“新加坡”}，{OrderID: 3, OrderDate:“2019-06-26T12:00:00”，运费:34.56,ShipCity:“上海”，ShipCountry:“中国”}，{OrderID: 4, OrderDate:“2017-09-20T12:00:00”，运费:45.67,ShipCity:“汉堡”，ShipCountry:“德国”}，{OrderID: 5, OrderDate:“2017-12-12T12:00:00”，运费:56.78,ShipCity:“安特卫普”;“孟买”，ShipCountry:“印度”}，{OrderID: 6, OrderDate:“2018-02-08T12:00:00”，运费:67.89,ShipCity:“上海”，ShipCountry:“中国”}，{OrderID: 7, OrderDate:“2018-05-05T12:00:00”，运费:78.90,ShipCity:“东京”，ShipCountry:“日本”}，{OrderID: 8, OrderDate:“2019-08-03T12:00:00”，运费:89.01,ShipCity:“巴生港”，ShipCountry:“马来西亚”}，{OrderID: 9, OrderDate:“2018-10-29T12:00:00”，运费:90.12,ShipCity:“鹿特丹”，ShipCountry:“荷兰”}，{OrderID:10, OrderDate: "2018-01-23T12:00:00"，运费:10.32,ShipCity: "温哥华"，ShipCountry: "加拿大"}，{OrderID: 11, OrderDate: "2018-04-17T12:00:00"，运费:21.43,ShipCity: "Colón"， ShipCountry: "巴拿马"}，{OrderID: 12, OrderDate: "2017-07-11T12:00:00"，运费:32.54,ShipCity: "马尼拉"，ShipCountry: "菲律宾"}，{OrderID: 13, OrderDate: "2017-10-24T12:00:00"，运费:43.65,ShipCity: "新加坡"，ShipCountry: "新加坡"}，{OrderID: 14, OrderDate: "2018-03-11T12:00:00"，运费:54.76, ShipCity: "釜山"，ShipCountry: "韩国"}，{OrderID: 15, OrderDate: "2018-06-17T12:00:00"，运费:65.87,ShipCity: "深圳"，ShipCountry: "中国"}，{OrderID: 16, OrderDate: "2018-10-13T12:00:00"，运费:76.98,ShipCity: "香港"，ShipCountry: "中国"}，{OrderID: 17, OrderDate: "2019-04-19T12:00:00"，运费:87.09,ShipCity: "迪拜"，ShipCountry: "阿联酋"}，{OrderID: 18, OrderDate: "2019-07-25T12:00:00"，运费:98.21,ShipCity: "Felixstowe"， ShipCountry: "China":"UK"}， {OrderID: 19, OrderDate: "2017-09-22T12:00:00"，运费:13.24,ShipCity: "Los Angeles"， ShipCountry: "USA"}， {OrderID: 20, OrderDate: "2018-12-09T12:00:00"，运费:35.46,ShipCity: "New York"， ShipCountry: "USA"}， {OrderID: 21, OrderDate: "2018-02-04T12:00:00"，运费:57.68,ShipCity: "Guangzhou"， ShipCountry: "China"}， {OrderID: 22, OrderDate: "2019-05-16T12:00:00"，运费:9.87,ShipCity: "Long Beach"， ShipCountry: "USA"}， {OrderID: 23, OrderDate::"2019-08-18T12:00:00"，运费:24.13,ShipCity: "Singapore"， ShipCountry: "Singapore"}];var gridDataSource = new kendo.data。DataSource({data: orderData, schema: {model: {fields: {OrderID: {type: "number"}， Freight: {type: "number"}， OrderDate: {type: "date"}， ShipCountry: {type: "string"}， ShipCity: {type: "string"}}}}， pageSize: 10, sort: {field: "OrderDate"， dir: "desc"}}); $("#ordersGrid").kendoGrid({ dataSource: gridDataSource, height: 400, pageable: true, sortable: true, filterable: true, columns: [{ field:"OrderID", title: "Order ID", width: 160 }, { field: "OrderDate", title: "Order Date", width: 200, format: "{0:dd MMMM yyyy}" }, { field: "ShipCountry", title: "Ship Country" }, { field: "ShipCity", title: "Ship City" }] }); });