jqgrid动态设置列宽

在jQuery UI jqGrid中，可以使用CSS直接设置列的初始宽度，也可以实现动态调整列宽以适应页面大小变化。以下是两种方式：

1. **静态设置列宽**[^1]:

   $('#gridLegs_WebGridCtrl1').css("width", "82"); // 这里设置了列的固定宽度为82像素，考虑了滚动条的影响（大约5px）

2. **响应式设计，动态调整列宽**[^2]:
- 首先，找到包含网格的最接近的具有`col-`类的父元素，这通常是用于栅格布局的容器。

   var parent_column = $("#grid-table").closest('[class*="col-"]');

- 当窗口尺寸改变时，监听`resize.jqGrid`事件并调用`setGridWidth`方法来调整网格的宽度，使其与父元素的宽度匹配。

   $(window).on('resize.jqGrid', function() {
       $("#grid-table").jqGrid('setGridWidth', parent_column.width());
   });

这样，当浏览器窗口大小发生变化时，网格会自动调整其宽度以适应。

相关问题

jqgrid 自适应列宽

jqGrid 提供了自适应列宽的功能，可以根据列中的内容自动调整列宽，以便完全显示所有内容。您可以使用 `shrinkToFit` 属性来实现自适应列宽。

具体步骤如下：

1. 设置 `shrinkToFit` 属性为 `true`：在 jqGrid 的初始化代码中，将 `shrinkToFit` 属性设置为 `true`，即可开启自适应列宽功能。

$("#grid").jqGrid({
    ...
    shrinkToFit: true,
    ...
});

2. 设置列宽和最小列宽：如果您希望某些列的宽度保持不变，可以在列模型中设置 `width` 属性；如果您希望某些列的宽度不要缩小过小，可以在列模型中设置 `minWidth` 属性。

$("#grid").jqGrid({
    ...
    colModel: [
        { name: "id", width: 100 },
        { name: "name", minWidth: 150 },
        { name: "description" },
        ...
    ],
    ...
});

通过以上设置，您的 jqGrid 将会自动根据列中的内容调整列宽，并且保证不小于最小列宽。

jqgrid 批量选择设置checkbox 列宽

JqGrid是一个用于创建动态表格的jQuery插件，它支持服务器端数据分页、排序和编辑等功能。如果你想在JqGrid中设置批量选择功能，并调整包含复选框的列宽度，可以按照以下步骤操作：

1. 首先，在配置JqGrid时，确保在colModel数组中有一个包含`name`, `width`, 和 `selectable`属性的列。例如，你可以这样定义一个用于批量选择的列：

   colModel: [
       { name: 'id', index: 'id', width: 50 },
       { name: 'checkbox', index: '__toggle', formatter: 'checkbox', align: 'center', width: 20, selectOnCheck: true },
       { name: 'title', index: 'title', width: 150 },
       ...
   ],

`selectable: true`会让每一行都有一个复选框，`align: 'center'`让复选框居中。

2. 对于列宽，上面已经设置了20px给`checkbox`列。如果你需要调整，可以直接修改对应的`width`值。

3. 当用户点击表头时，JqGrid会启用或禁用所有行的勾选状态，这依赖于`selectOnCheck`选项。默认情况下，如果某一行的某个字段被点击，该行会被选中，其他行则会被取消选择。