根据jqGrid宽度调整列

Question

我有带有 shrinkToFit: false 和 autowidth: true 的 jqGrid，并且在网格中有 5 列。

它看起来很完美，除非在网格中再添加一列，即如果有 6 列，那么滚动条会出现在网格的底部。

有没有什么方法可以让所有的列都适合网格而不显示滚动条？

我尝试为列提供硬编码宽度，但我想要一些适用于任意数量列的解决方案。

我的 JQGrid 代码如下所示

$("#grid1").jqGrid({
        colModel: [
            { name: "name", label: "Client", width: 53 },
            { name: "name", label: "Client1", width: 53 },
            { name: "name", label: "Client2", width: 53 },
            { name: "name", label: "Client3", width: 53 },
            { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
             formatter: "date", formatoptions: { newformat: "d-M-Y" } },
            { name: "amount", label: "Amount", width: 65, template: "number" },
            { name: "tax", label: "Tax", width: 41, template: "number" },
            { name: "total", label: "Total", width: 51, template: "number" },
            { name: "closed", label: "Closed", width: 59, template: "booleanCheckboxFa", firstsortorder: "desc" },
            { name: "ship_via", label: "Shipped via", width: 87, align: "center", formatter: "select",
             formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" } }
        ],
        data: [
            { id: "10",  invdate: "2015-10-01", name: "test",   amount: "" },
            { id: "20",  invdate: "2015-09-01", name: "test2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "30",  invdate: "2015-09-01", name: "test3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "40",  invdate: "2015-10-04", name: "test4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "50",  invdate: "2015-10-31", name: "test5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "60",  invdate: "2015-09-06", name: "test6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "70",  invdate: "2015-10-04", name: "test7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "80",  invdate: "2015-10-03", name: "test8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "90",  invdate: "2015-09-01", name: "test9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
            { id: "100", invdate: "2015-09-08", name: "test10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
            { id: "110", invdate: "2015-09-08", name: "test11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
            { id: "120", invdate: "2015-09-10", name: "test12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
        iconSet: "fontAwesome",
        rownumbers: true,
        sortname: "invdate",
        sortorder: "desc",
        autowidth: true,
        shrinkToFit: false,
        caption: "The grid, which uses predefined formatters and templates"
    });
});

更新：

这是它的屏幕截图。

JQGrid

这里我不想要滚动条，但所有列都应该适合网格内

Answer 1

你可以试试这个，从所有列中删除宽度属性并设置shrinkToFit: true, and autowidth: true。

请检查这个小提琴

JQGrid

当您设置shrinkToFit: true, and autowidth: true 时，网格将采用与其父元素相同的全宽。在示例中，我在一个 div 下添加了表格，并且该 div 具有 500 宽度，然后网格将使用 500px