kendoui固定宽度_Web界面开发工具！Kendo UI for jQuery数据管理:调整列大小等

调整列大小

网格列的大小调整操作取决于是否启用滚动，有关可运行的示例，请参阅有关调整Grid中列大小的演示。

$(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

}

]

});

});

禁用滚动并调整Grid列的大小时，其他列也会更改宽度，以便所有列宽度的总和保持恒定。 如果列和Grid

均已应用了其最小可能宽度，则列的大小调整将停止工作。 在这种情况下，请在以下两种方法中选择一种使用：

将较大的宽度应用于网格

启用滚动

启用滚动并调整列的大小时，所有其他列均保持其宽度。 当应用列大小调整时，关于所有列宽度的总和，可能会产生以下结果：

如果所有列宽度的总和大于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中实现列重新排序的演示。

$(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

}

]

});

});