我需要为每列定义一个固定宽度还是可以自动计算?

Do I need to define a fixed width for each column or it can be automatically calculated?

我想知道是否有任何配置,我错过了它,其中列在 jQgrid 中自动适合网格宽度,或者我是否需要为它们中的每一个定义一个固定宽度(这不是很酷)。我尝试了以下但没有成功:

$(function () {
    "use strict";
    var $grid = $("#list");

    $grid.jqGrid({
        url: '/ajax/plans_to_forms/get_all',
        datatype: "json",
        colNames: ["Actions", "Form #", "Form", "Plan", "Class", "Drug"],
        colModel: [
            {name: "act", template: "actions"},
            {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 50},
            {name: "FormName"},
            {name: "PlanName"},
            {name: "DrugGroupName"},
            {name: "DrugName"}
        ],
        cmTemplate: {autoResizable: true, editable: true},
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {compact: true},
        rowList: [25, 50, 100, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        shrinkToFit: false
    }).jqGrid("navGrid", {
        edit: false,
        add: false,
        del: true,
        search: false,
        refresh: true
    }).jqGrid("filterToolbar").jqGrid("gridResize");
});

结果如下:

免费的 jqGrid 具有从第一个发布版本 (4.8) 开始的功能。我在 the wiki article 中描述了该功能。您主要需要在网格中添加 autoresizeOnLoad: true 选项来解决您的问题。

问题是存在许多对 "auto-resizing" 行为的小解释。您可以在 jqGridAfterLoadComplete 事件中调用 autoResizeAllColumns 方法来实现标准行为的一些变体。例如 the answer and the demo https://jsfiddle.net/OlegKi/dk2qwbcs/6/) 显示了如何使用 "auto-resizing" 将网格大小减小到最小宽度而不收缩,并在较小的外部 window.[=19 的情况下在网格中添加水平滚动条=]

另一个 属性:autoResizing 选项的 resetWidthOrg: true 可以在使用缩减的情况下提供帮助。请参阅演示 https://jsfiddle.net/OlegKi/ejpn9/149/,其中属性

autoresizeOnLoad: true,
autowidth: true,
autoResizing: {
    compact: true,
    resetWidthOrg: true
},

被使用。