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。
内联编辑
当用户单击一行时,网格提供用于内联编辑其数据的选项。要启用内联编辑操作,请将Grid的editable选项设置为inline。
弹出式编辑
网格提供用于在弹出窗口中编辑其数据的选项。要启用弹出窗口编辑操作,请将Grid的editable选项设置为popup。
!DOCTYPE html>
自定义编辑
网格使您可以实现自定义列编辑器,并指定在用户编辑数据时适用的验证规则。
实施自定义编辑器
要在网格中实现自定义编辑器,请指定相应列的编辑器字段。该字段的值将指向JavaScript函数,该函数将实例化对应列单元格的列编辑器。
$(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) {
$(‘’)
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
设置验证规则
要为编辑操作定义验证规则,请在数据源的架构中配置验证选项。