【jqgrid（设置选中）】在使用 jqGrid 进行数据展示时，用户经常需要对某些行进行“选中”操作，比如高亮显示、获取选中行数据或执行特定操作。jqGrid 提供了多种方式来实现选中功能，包括通过点击行、设置默认选中状态以及动态控制选中状态等。
以下是对 jqGrid 设置选中功能的总结，结合不同场景和方法，帮助开发者更好地理解和应用。
一、常用设置方法总结
| 功能 | 方法/属性 | 说明 |
| 默认选中某一行 | `selrow` | 在初始化时设置该属性为行ID，可自动选中指定行 |
| 点击行选中 | `onSelectRow` | 在行被点击时触发，可用于处理选中逻辑 |
| 多选支持 | `multiselect: true` | 开启多选模式，允许用户按住 Ctrl 或 Shift 选择多行 |
| 获取选中行 | `getGridParam('selarrrow')` | 获取所有选中的行ID数组 |
| 清除选中 | `clearGridData(true)` | 清除所有选中状态（需配合参数） |
| 动态设置选中 | `setSelection(rowid, true)` | 动态设置某一行选中状态 |
二、示例代码
1. 初始化并默认选中某一行
```javascript
$("grid").jqGrid({
url: 'data.json',
datatype: 'json',
colModel: [
{ name: 'id', index: 'id', width: 50 },
{ name: 'name', index: 'name', width: 150 }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: 'pager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "My Grid",
selrow: '1' // 默认选中id为1的行
});
```
2. 点击行后执行选中逻辑
```javascript
$("grid").jqGrid({
...
onSelectRow: function (rowid) {
alert("选中了行：" + rowid);
}
});
```
3. 启用多选并获取选中行
```javascript
$("grid").jqGrid({
...
multiselect: true,
onSelectAll: function (aRowIds, status) {
alert("是否全选：" + status);
}
});
// 获取所有选中行ID
var selectedRows = $("grid").jqGrid('getGridParam', 'selarrrow');
console.log(selectedRows);
```
三、注意事项
- `selrow` 只能在初始化时设置一次，若需要动态更改，应使用 `setSelection()`。
- 使用 `multiselect` 时，需确保前端与后端支持多选逻辑。
- `clearGridData(true)` 会清除所有数据及选中状态，适用于重新加载数据时。
四、总结
jqGrid 的选中功能灵活且强大，通过合理的配置可以实现丰富的交互体验。无论是默认选中、点击选中还是多选，都可以根据业务需求进行定制。掌握这些方法，能够有效提升用户体验和开发效率。
