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

时间:2018-01-03 18:49:19

标签: javascript jquery jqgrid free-jqgrid

我想知道是否有任何配置,我错过了它在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");
});

结果如下:

enter image description here

1 个答案:

答案 0 :(得分:1)

免费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
},

被使用。