### 如何在EasyUI前端框架中获取combogrid控件
选中的整行值
在EasyUI框架中，`combogrid` 控件结合了 `combo` 和 `datagrid` 的功能，可以通过其方法访问底层的 `datagrid` 对象，并从中获取
选中的整行数据。以下是一个完整的代码示例，展示如何实现这一需求。
```
javascript
function getGridValue() {
var grid = $("#cc").combogrid("grid"); // 获取 combogrid 内部的 datagrid 对象[^3]
var row = grid.datagrid('getSelected'); // 使用 datagrid 的 getSelected 方法获取
选中行[^3]
if (row) {
alert("选择的grid中的数据如下：code:" + row.code + " name:" + row.name + " addr:" + row.addr + " col4:" + row.col4);
} else {
alert("未
选中任何行！");
}
}
```
上述代码中，`$("#cc").combogrid("grid")` 用于获取 `combogrid` 内部的 `datagrid` 对象[^3]。然后通过 `datagrid('getSelected')` 方法获取当前
选中的行数据。如果
选中了一行，则返回该行的所有字段值；如果没有
选中任何行，则返回 `null`。
### 完整HTML与
JavaScript代码示例
以下是一个完整的页面示例，包含 `combogrid` 控件及其相关操作
按钮：
```html
<!DOCTYPE html>
<html>
<head>
<title>EasyUI Combogrid 示例</title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://cdn.
jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.
js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.
js"></script>
<script>
$(
function () {
$("#cc").combogrid({
panelWidth: 400,
value: '002', //
缺省值
idField: "code",
textField: "name",
url: "datagrid_data.
json", // 数据源URL
columns: [[
{ field: 'code', title: 'Code', width: 60 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'addr', title: 'Address', width: 120 },
{ field: 'col4', title: 'Col41', width: 100 }
]]
});
});
function getGridValue() {
var grid = $("#cc").combogrid("grid"); // 获取内部的 datagrid 对象
var row = grid.datagrid('getSelected'); // 获取
选中行
if (row) {
alert("选择的grid中的数据如下：code:" + row.code + " name:" + row.name + " addr:" + row.addr + " col4:" + row.col4);
} else {
alert("未
选中任何行！");
}
}
</script>
</head>
<body>
<h3>Combogrid 示例</h3>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="getGridValue()">获取
选中行</a>
</div>
<select id="cc" class="easyui-combogrid" style="width:250px;"></select>
</body>
</html>
```
此示例展示了如何初始化一个 `combogrid` 控件，并通过点击
按钮调用 `getGridValue` 函数来获取
选中的整行数据。
### 注意事项
- 确保 `combogrid` 的 `idField` 和 `textField` 属性正确
设置，以便能够正确显示和操作数据。
- 如果需要动态加载数据，确保 `url` 属性指向有效的
JSON 数据源[^3]。
- 在调用 `getSelected` 方法之前，应确认用户已
选中某一行，否则可能返回 `null`。
JavaScript初学者指南：页面加载自动聚焦于首字母输入框
本文介绍了如何使用JavaScript在页面加载时自动将焦点置于首字母输入框上，通过实现window.onload事件来简化用户体验。
扫一扫
32
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
