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库。
<!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 id="example"> <div id="grid"></div><script> $(document).ready(function () { var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } });$("#grid").kendoGrid({ dataSource: dataSource, navigatable: true, pageable: true, height: 550, toolbar: ["create", "save", "cancel"], columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 }, { field: "UnitsInStock", title: "Units In Stock", width: 120 }, { field: "Discontinued", width: 120, editor: customBoolEditor }, { command: "destroy", title: " ", width: 150 }], editable: true }); });function customBoolEditor(container, options) { var guid = kendo.guid(); $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container); $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container); } </script> </div></body> </html>
<!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 id="example"> <div id="grid"></div><script> $(document).ready(function () { var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } });$("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create"], columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title:"Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px", editor: customBoolEditor }, { command: ["edit", "destroy"], title: " ", width: "250px" }], editable: "inline" }); });function customBoolEditor(container, options) { var guid = kendo.guid(); $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container); $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container); } </script> </div></body> </html>
<!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 id="example"> <div id="grid"></div><script> $(document).ready(function () { var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } });$("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create"], columns: [ { field:"ProductName", title: "Product Name" }, { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title:"Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px", editor: customBoolEditor }, { command: ["edit", "destroy"], title: " ", width: "250px" }], editable: "popup" }); });function customBoolEditor(container, options) { var guid = kendo.guid(); $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container); $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container); } </script> </div></body> </html>
<!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 src="../content/shared/js/products.js"></script> <div id="example"> <div id="grid"></div><script>$(document).ready(function () { var dataSource = new kendo.data.DataSource({ pageSize: 20, data: products, autoSync: true, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} }, UnitPrice: { type: "number", validation: { required: true, min: 1} } } } } });$("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create"], columns: [ { field:"ProductName",title:"Product Name" }, { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" }, { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" }, { command: "destroy", title: " ", width: "150px" }], editable: true }); });function categoryDropDownEditor(container, options) { $('<input required name="' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataTextField: "CategoryName", dataValueField: "CategoryID", dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories" } } }); }</script> </div></body> </html>
设置验证规则
<!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 id="example"> <div id="grid"></div><script> $(document).ready(function () { var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true, productnamevalidation: function (input) { if (input.is("[name='ProductName']") && input.val() != "") { input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter"); return /^[A-Z]/.test(input.val()); }return true; } } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true} } } } } });$("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create"], columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title: "Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px" }, { command: ["edit", "destroy"], title: " ", width: "250px"}], editable: "inline" }); }); </script> </div></body> </html>
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！