Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

时间: 2019-12-20来源：OSCHINA

前景提要

【围观】麒麟芯片遭打压成绝版，华为亿元投入又砸向了哪里？>>>
Kendo UI for jQuery最新试用版下载
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网格的基本功能，可让您操纵其数据的显示方式。
Kendo UI Grid提供以下编辑模式：批量编辑内联编辑弹出式编辑自定义编辑
批量编辑
网格使您能够进行和保存批量更新。要在网格中启用批处理编辑操作，请将数据源的批处理选项设置为true。 <!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>
内联编辑
当用户单击一行时，网格提供用于内联编辑其数据的选项。要启用内联编辑操作，请将Grid的editable选项设置为inline。 <!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>
弹出式编辑
网格提供用于在弹出窗口中编辑其数据的选项。要启用弹出窗口编辑操作，请将Grid的editable选项设置为popup。 <!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>
自定义编辑
网格使您可以实现自定义列编辑器，并指定在用户编辑数据时适用的验证规则。
实施自定义编辑器
要在网格中实现自定义编辑器，请指定相应列的编辑器字段。该字段的值将指向JavaScript函数，该函数将实例化对应列单元格的列编辑器。 <!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>
了解最新Kendo UI最新资讯，请关注Telerik中文网！