• <menu id="w2i4a"></menu>
  •
    logo Kendo UI使用教程-2019
    文檔首頁>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：調整列大小/列的重新排序

    Kendo UI for jQuery數據管理使用教程：調整列大小/列的重新排序

    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是創(chuàng)建現(xiàn)代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的寬度，則會出現(xiàn)一個水平滾動條。
    • 如果所有列寬的總和等于Grid的寬度，則不會出現(xiàn)水平滾動條。
    • 如果所有列寬度的總和小于Grid的寬度，則最后一列后會出現(xiàn)一個空白。

    根據設計，網格的最后一列沒有右邊框，因此如果網格表的寬度與網格小部件的寬度匹配，則網格的右端將不會出現(xiàn)雙邊框。如果需要，您可以在以下示例中為CSS代碼應用右邊框， #ccc邊框的顏色值必須與Kendo UI主題中單元格邊框的顏色匹配，為此請使用DOM檢查器檢查表單元格的樣式。 


    .k-grid-header-wrap > table,
.k-grid-content > table {
border-right: 1px solid #ccc;
}


    列的重新排序

    Grid提供用于重新排序其列的選項。若要使用戶能夠通過拖動來重新排序網格的列，請將reorderable屬性設置為true。 有關可運行的示例，請參閱有關在Grid中實現(xiàn)列重新排序的演示。 

    <!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中文網！

    掃描關注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊

    慧聚IT微信公眾號
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();