我是否需要为每列定义固定宽度，还是可以自动计算？

Posted 2021-04-19

我想知道是否有任何配置，我错过了它在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选项添加到网格中以解决您的问题。

问题在于存在许多对“自动调整大小”行为的小解释。你可以在autoResizeAllColumns事件中调用jqGridAfterLoadComplete方法来实现标准行为的一些变化。例如the answer和演示https://jsfiddle.net/OlegKi/dk2qwbcs/6/）展示了如何使用“自动调整大小”将网格大小减小到最小宽度而不收缩，并在外部窗口较小的情况下在网格中添加水平滚动条。

另一个属性：resetWidthOrg: true选项的autoResizing在使用情况下可能会有所帮助。请参阅演示https://jsfiddle.net/OlegKi/ejpn9/149/的属性

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

使用。