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 for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
调整列大小
格列的大小调整操作取决于是否启用滚动，有关可运行的示例，请参阅有关调整Grid中列大小的演示。
<!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() {$("#grid").kendoGrid({dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"},schema: {model: {fields: {OrderID: { type: "number" },ShipCountry: { type: "string" },ShipCity: { type: "string" },ShipName: { type: "string" },OrderDate: { type: "date" },ShippedDate: { type: "date" }}}},pageSize: 15},height: 550,sortable: true,resizable: true,pageable: true,columns: [{field: "OrderDate",title: "Order Date",width: 120,format: "{0:MM/dd/yyyy}"},{field: "ShipCountry",title: "Ship Country",minResizableWidth: 100},{field: "ShipCity",title: "Ship City"},{field: "ShipName",title: "Ship Name"},{field: "ShippedDate",title: "Shipped Date",format: "{0:MM/dd/yyyy}",width: 200},{field: "OrderID",title: "ID",width: 80}]});});</script></div></body></html>
禁用滚动并调整Grid列的大小时，其他列也会更改宽度，以便所有列宽度的总和保持恒定。 如果列和Grid <div>均已应用了其最小可能宽度，则列的大小调整将停止工作。 在这种情况下，请在以下两种方法中选择一种使用：
- 将较大的宽度应用于 格
- 启用滚动
启用滚动并调整列的大小时，所有其他列均保持其宽度。 当应用列大小调整时，关于所有列宽度的总和，可能会产生以下结果：
- 如果所有列宽度的总和大于Grid的宽度，则会出现一个水平滚动条。
- 如果所有列宽的总和等于Grid的宽度，则不会出现水平滚动条。
- 如果所有列宽度的总和小于Grid的宽度，则最后一列后会出现一个空白。
根据设计， 格的最后一列没有右边框，因此如果 格表的宽度与 格小部件的宽度匹配，则 格的右端将不会出现双边框。如果需要，您可以在以下示例中为CSS代码应用右边框， #ccc边框的颜色值必须与Kendo UI主题中单元格边框的颜色匹配，为此请使用DOM检查器检查表单元格的样式。
.k-grid-header-wrap > table,.k-grid-content > table {border-right: 1px solid #ccc;}
列的重新排序
Grid提供用于重新排序其列的选项。若要使用户能够通过拖动来重新排序 格的列，请将reorderable属性设置为true。 有关可运行的示例，请参阅有关在Grid中实现列重新排序的演示。
<!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() {$("#grid").kendoGrid({dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"},schema: {model: {fields: {OrderID: { type: "number" },ShipCountry: { type: "string" },ShipCity: { type: "string" },ShipName: { type: "string" },OrderDate: { type: "date" },ShippedDate: {type: "date" }}}},pageSize: 15},height: 550,sortable: true,reorderable: true,resizable: true,pageable: true,columns: [{field: "OrderDate",title: "Order Date",width: 120,format: "{0:MM/dd/yyyy}"},{field: "ShipCountry",title: "Ship Country"},{field: "ShipCity",title: "Ship City"},{field: "ShipName",title: "Ship Name"},{field: "ShippedDate",title: "Shipped Date",format: "{0:MM/dd/yyyy}",width: 200},{field: "OrderID",title: "ID",width: 80}]});});</script></div></body></html>
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！