以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 取得选中行数据”的专业回答。我将详细讲解如何在 jQuery EasyUI 的数据网格（DataGrid）中取得选中行数据，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。

jQuery EasyUI 数据网格 – 取得选中行数据

目录

  1. 引言
  2. 选中行数据概述
  1. 实现基础选中行数据获取
  1. 高级选中行数据配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）提供了便捷的方法来获取用户选中的行数据，这对于实现数据操作（如编辑、删除）至关重要。本教程将从基础到高级，带你掌握如何在 DataGrid 中取得选中行数据，并提供实用示例。

2. 选中行数据概述

2.1 什么是选中行数据？

  • 定义：选中行数据是指用户在 DataGrid 中通过点击或其他方式选择的一行或多行数据，可通过内置方法获取其内容。
  • 实现方式：使用 DataGrid 的方法，如 getSelected（单行）或 getSelections（多行）。

2.2 选中行数据的应用场景

  • 数据操作：如编辑或删除选中的记录。
  • 信息展示：显示选中行的详细信息。
  • 参考：jQuery EasyUI 官方文档 DataGrid 部分（jeasyui.com）。

3. 实现基础选中行数据获取

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<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">

3.2 取得基础选中行数据

  • 方法：
  • getSelected：获取当前选中的单行数据。
  • getRowIndex：获取选中行的索引。
  • 示例：
function getSelectedRow() {
  var row = $('#dg').datagrid('getSelected');
  if (row) {
    alert('选中行: ' + row.name);
  } else {
    alert('未选中任何行');
  }
}

3.3 实例：基础选中行数据

以下是一个基础选中行数据的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础选中行数据</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <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">
  <style>
    body { padding: 20px; }
    #tb { padding: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础选中行数据</h2>
    <div id="tb">
      <a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="getSelectedRow()">获取选中行</a>
    </div>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb"></table>
  </div>
  <script>
    var data = [
      { id: 1, name: '手机', price: 1000 },
      { id: 2, name: '笔记本', price: 2000 },
      { id: 3, name: '平板', price: 800 }
    ];

    $('#dg').datagrid({
      data: data,
      columns: [[
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) { return '¥' + value; } }
      ]]
    });

    function getSelectedRow() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        $.messager.alert('选中行', 'ID: ' + row.id + ', 名称: ' + row.name + ', 价格: ¥' + row.price, 'info');
      } else {
        $.messager.alert('提示', '请先选择一行！', 'warning');
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 表格显示数据，工具栏含“获取选中行”按钮。
  • 点击按钮，若选中行则弹出详细信息，否则提示未选中。

4. 高级选中行数据配置

4.1 多行选择和批量操作

  • 多行选择：设置 singleSelect: false 并使用 getSelections 获取多行数据。
  • 示例：
function getSelectedRows() {
  var rows = $('#dg').datagrid('getSelections');
  alert('选中了 ' + rows.length + ' 行');
}

4.2 动态交互和事件处理

  • 动态交互：通过 onSelect 或 onUnselect 事件实时处理选中状态。
  • 示例：
$('#dg').datagrid({
  onSelect: function(index, row) {
    console.log('选中行: ', row);
  }
});

4.3 实例：带交互的动态选中行数据

以下是一个带交互的动态选中行数据的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 带交互的动态选中行数据</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <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">
  <style>
    body { padding: 20px; }
    #tb { padding: 5px; }
    .tb-item { margin-right: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>带交互的动态选中行数据</h2>
    <div id="tb">
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-ok" plain="true" onclick="getSelectedRow()">获取单行</a>
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-sum" plain="true" onclick="getSelectedRows()">获取多行</a>
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-remove" plain="true" onclick="deleteSelectedRows()">删除选中</a>
    </div>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb"></table>
    <div id="details" style="margin-top: 10px;"></div>
  </div>
  <script>
    var data = [
      { id: 1, name: '手机', price: 1000, category: '电子' },
      { id: 2, name: 'T恤', price: 50, category: '服装' },
      { id: 3, name: '平板', price: 800, category: '电子' }
    ];

    $('#dg').datagrid({
      data: data,
      singleSelect: false, // 启用多选
      columns: [[
        { field: 'ck', checkbox: true }, // 添加复选框
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) { return '¥' + value; } },
        { field: 'category', title: '类别', width: 150 }
      ]],
      onSelect: function(index, row) {
        updateDetails();
      },
      onUnselect: function(index, row) {
        updateDetails();
      }
    });

    function getSelectedRow() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        $.messager.alert('单行数据', 'ID: ' + row.id + ', 名称: ' + row.name + ', 价格: ¥' + row.price, 'info');
      } else {
        $.messager.alert('提示', '请先选择一行！', 'warning');
      }
    }

    function getSelectedRows() {
      var rows = $('#dg').datagrid('getSelections');
      if (rows.length > 0) {
        var msg = '选中了 ' + rows.length + ' 行:\n';
        rows.forEach(function(row) {
          msg += 'ID: ' + row.id + ', 名称: ' + row.name + '\n';
        });
        $.messager.alert('多行数据', msg, 'info');
      } else {
        $.messager.alert('提示', '请至少选择一行！', 'warning');
      }
    }

    function deleteSelectedRows() {
      var rows = $('#dg').datagrid('getSelections');
      if (rows.length > 0) {
        $.messager.confirm('确认', '确定删除 ' + rows.length + ' 行数据吗？', function(r) {
          if (r) {
            rows.forEach(function(row) {
              var index = $('#dg').datagrid('getRowIndex', row);
              $('#dg').datagrid('deleteRow', index);
            });
            $.messager.show({ title: '提示', msg: '已删除选中行', timeout: 2000, showType: 'slide' });
          }
        });
      } else {
        $.messager.alert('提示', '请至少选择一行！', 'warning');
      }
    }

    function updateDetails() {
      var rows = $('#dg').datagrid('getSelections');
      var details = '当前选中行数: ' + rows.length;
      if (rows.length > 0) {
        details += '<br>总价格: ¥' + rows.reduce(function(sum, row) { return sum + row.price; }, 0);
      }
      $('#details').html(details);
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 表格支持多选，带复选框列。
  • “获取单行”显示第一选中行的详细信息；“获取多行”列出所有选中行；“删除选中”移除选中行并提示。
  • 选中状态变化时，下方动态显示选中行数和总价格。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 单选与多选：根据需求选择 singleSelect 值，添加复选框提升多选体验。
  • 用户反馈：通过 $.messager 提供操作结果提示。
  • 事件监听：利用 onSelect 和 onUnselect 实现实时交互。

5.2 性能优化与调试

  • 性能：多行操作时避免重复遍历数据，优化批量删除逻辑。
  • 调试：检查 getSelections 返回值是否正确，确认事件触发无误。

6. 结论

jQuery EasyUI 的 DataGrid 通过 getSelected 和 getSelections 方法提供了灵活的选中行数据获取能力，适用于单行和多行操作场景。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要查询功能支持，可参考 jQuery EasyUI 查询功能 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础单行到动态多行操作，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础选中行数据获取。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。