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`选项。默认情况下，如果某一行的某个字段被点击，该行会被选中，其他行则会被取消选择。

相关问题

jqgrid固定表头，拖动列宽

要在 jqGrid 中固定表头，您可以使用以下代码：

$("#grid").jqGrid('setGridParam', {
    scroll: 1
}).jqGrid('setFrozenColumns');

其中，`scroll: 1` 用于启用滚动条，而 `setFrozenColumns` 则用于冻结表头。

对于拖动列宽，jqGrid 默认已经支持。您可以通过设置 `resize` 选项来启用列宽调整：

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

这样，在表头右侧会出现可拖动的列宽调整块，您可以通过拖动来调整列宽。

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());
   });

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