Jquery 调整网格大小时，剑道UI固定宽度列大小得到增加

我将第一列设置为固定宽度“31px”，但当所有列都变小并通过调整容器大小来调整网格大小时，第一列的宽度会增加。在feddle示例中，如果将Title和Age列的大小设置为中的小，然后调整大小，则会看到第一列的宽度增加

var ds = new kendo.data.DataSource({
data: createRandomData(50),
schema: {
    model: {
        fields: {
            FirstName: { type: "string" },
            LastName: { type: "string" },
            City: { type: "string" },
            Title: { type: "string" },
            Age: { type: "number" }
        }
    }
},
pageSize: 10
});

$(document).ready(function() {
$("#grid").kendoGrid({
    dataSource: ds,
    height: 450,
    sortable: true,
    reorderable: true,
    resizable: true,
    pageable: true,
    columnResize : saveWidthOfColumns,
    rowTemplate: kendo.template($("#template").html()),
    columns: JSON.parse('[{"title":"FirstName","width":"31px"},{"title":"Title","width":null},{"title":"Age","width":null}]')
});
});
function saveWidthOfColumns(event) {
if (event.column.field == null) {
    $("#grid colgroup").each(function() {
        $(this).find(":nth-child(1)").css("width", "31px");
    });
}
} 
$(window).resize(function() {
resizeGrid();
});
function resizeGrid() {
var newWidth = $('body').innerWidth() - 20;
var oldWidth = $(".k-grid-content table").width() - 20;
if(oldWidth < newWidth)
{
    $(".k-grid-content").css("padding-right", "18px");
    $(".k-grid-content table").css("width",newWidth + "px");
    $(".k-grid-header-wrap table").css("width",newWidth + "px");
}

var ds=new kendo.data.DataSource({
数据：createRandomData（50），
模式：{
型号：{
字段：{
名字：{type:“string”}，
姓氏：{type:“string”}，
城市：{type:“string”}，
标题：{type:“string”}，
年龄：{type:“number”}
}
}
},
页面大小：10
});
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：ds，
身高：450，
可排序：是的，
可重定额：对，
可调整大小：正确，
pageable:对，
columnResize:saveWidthOfColumns，
rowTemplate:kendo.template（$（“#template”）.html（）），
列：JSON.parse（'[{“title”：“FirstName”，“width”：“31px”}，{“title”：“title”，“width”：null}，{“title”：“Age”，“width”：null}'））
});
});
函数saveWidthOfColumns（事件）{
if（event.column.field==null）{
$（“#网格colgroup”）。每个（函数（）{
$（this.find（“：nth child（1）”）.css（“width”，“31px”）；
});
}
} 
$（窗口）。调整大小（函数（）{
调整网格大小（）；
});
函数resizeGrid（）{
var newWidth=$（'body'）。innerWidth（）-20；
var oldWidth=$（.k-grid-content表”）.width（）-20；
如果（旧宽度<新宽度）
{
$（.k-grid-content”）.css（“右边填充”、“18px”）；
$（.k-grid-content table”）.css（“宽度”，newWidth+“px”）；
$（.k-grid-header-wrap table”）.css（“宽度”，newWidth+“px”）；
}

}

---

我不确定我是否完全理解您的问题，但请尝试从容器div中删除宽度样式，网格将适当填充并调整大小。

请注意，问题必须包含一个问题（例如，在末尾）。这样你的问题就更尖锐了，回答起来也更容易了。为什么不使用.resize小部件方法而不是手动操作呢？下面是一个窗口更改时调整大小的示例，我希望使第一列宽度始终为“31px”，但问题是，当我将标题和年龄列设置为最小宽度，然后调整容器大小时，第一列宽度得到更改，我希望它与调整大小之前相同。