Kendo UI for jQuery数据管理使用教程:调整列大小/列的重新排序

原创|使用教程|编辑:龚雪|2020-04-17 09:32:04.710|阅读 19 次

概述: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 for jQuery R1 2020 SP2试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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中文网!

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat