jqgrid 树形结构 设置多选
时间: 2023-07-22 22:26:29 浏览: 60
在 jqGrid 中启用多选功能非常简单,只需将 `multiselect` 选项设置为 `true`。而在树形结构中启用多选功能需要修改一下配置项。
首先,需要将 `treeGrid: true` 选项设置为 `true`,以启用树形网格功能。然后,需要将 `treeGridModel` 选项设置为 `'adjacency'` 或 `'nested'`,以指定使用哪种树形模型。最后,需要将 `treeIcons` 选项设置为 `false`,以禁用默认的树形图标。例如:
```
$("#myGrid").jqGrid({
url: "myData.json",
datatype: "json",
colModel: [
{ name: "id", label: "ID", width: 50 },
{ name: "name", label: "Name", width: 100 },
{ name: "address", label: "Address", width: 150 }
],
treeGrid: true, // 启用树形网格
treeGridModel: "nested", // 使用嵌套模型
treeIcons: false, // 禁用默认的树形图标
multiselect: true, // 启用多选
rowNum: 10,
rowList: [10, 20, 30],
pager: "#myPager",
caption: "My Grid"
});
```
在启用多选功能后,可以使用 `getGridParam('selarrrow')` 方法获取当前选中的行的 ID 数组。但是,在树形结构中,如果用户选择了一个父节点,则该节点下的所有子节点都会被选中。为了避免这种情况,需要使用 `getTreeSelectedRows` 方法来获取当前选中的行的 ID 数组。此方法将返回一个数组,其中包含所有当前选中行的 ID,但不包括其子节点的 ID。例如:
```
var selectedRows = $("#myGrid").jqGrid('getTreeSelectedRows');
```
注意,在使用 `getTreeSelectedRows` 方法时,需要将 `treeGrid: true` 和 `multiselect: true` 选项同时设置为 `true`,才能正确获取选中的行的 ID 数组。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)