Kendo UI for jQuery R1 2020 SP2試用版下載
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>
瞭解最新Kendo UI最新資訊,請關注Telerik中文網!