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

jQuery EasyUI 数据网格 – 添加复选框

目录

  1. 引言
  2. 复选框概述
  1. 添加基础复选框
  1. 高级复选框配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）支持复选框功能，允许用户选择单行或多行数据，用于批量操作或标记。本教程将从基础到高级，带你掌握如何在 DataGrid 中添加复选框，并提供实用示例。

2. 复选框概述

2.1 什么是复选框功能？

  • 定义：复选框是 DataGrid 的一种交互元素，用于选择行数据，可通过列头复选框实现全选/取消全选。
  • 实现方式：通过 checkbox 字段或自定义列启用复选框，配合事件处理选中状态。

2.2 复选框的应用场景

  • 批量操作：如删除、编辑多行数据。
  • 数据标记：标记特定行以供后续处理。
  • 参考：jQuery EasyUI 官方文档 DataGrid 复选框部分（jeasyui.com/documentation）。

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 启用复选框

  • 方法：在列定义中添加 checkbox: true，并设置 singleSelect: false 允许多选。
  • 示例：
<table id="dg" class="easyui-datagrid" data-options="singleSelect: false">
  <thead>
    <tr>
      <th data-options="field:'ck',checkbox:true"></th>
      <th data-options="field:'name'">名称</th>
    </tr>
  </thead>
</table>

3.3 实例：基础复选框

以下是一个基础复选框的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <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>
    .container { max-width: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础复选框</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
           data-options="
             rownumbers: true,
             singleSelect: false">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true,width:50"></th>
          <th data-options="field:'id',width:100">ID</th>
          <th data-options="field:'name',width:200">名称</th>
          <th data-options="field:'price',width:100,align:'right'">价格</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    // 示例数据
    var data = {
      rows: [
        { id: 1, name: '产品 1', price: 10.5 },
        { id: 2, name: '产品 2', price: 20.75 },
        { id: 3, name: '产品 3', price: 15.0 }
      ]
    };
    $('#dg').datagrid('loadData', data);
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示 3 行数据，每行左侧有复选框，列头有全选复选框，可选择单行或多行。

4. 高级复选框配置

4.1 自定义复选框列

  • 方法：使用 formatter 自定义复选框样式或逻辑。
  • 示例：
columns: [[
  {
    field: 'ck',
    checkbox: true,
    formatter: function(value, row, index) {
      return '<input type="checkbox" ' + (row.checked ? 'checked' : '') + '>';
    }
  }
]]

4.2 处理选中数据

  • 方法：使用 getSelections 获取选中行，或监听 onCheck、onUncheck 事件处理选中状态。
  • 示例：
onCheck: function(index, row) {
  console.log('选中:', row);
},
onUncheck: function(index, row) {
  console.log('取消选中:', row);
}

4.3 实例：带全选和数据操作的复选框

以下是一个带全选功能和数据操作的高级示例：

前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <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>
    .container { max-width: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>带全选和数据操作的复选框</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
           data-options="
             rownumbers: true,
             singleSelect: false,
             onCheck: function(index, row) {
               console.log('选中:', row);
             },
             onUncheck: function(index, row) {
               console.log('取消选中:', row);
             },
             onCheckAll: function(rows) {
               console.log('全选:', rows.length, '行');
             },
             onUncheckAll: function(rows) {
               console.log('取消全选');
             }">
      <thead>
        <tr>
          <th data-options="field:'ck',checkbox:true,width:50"></th>
          <th data-options="field:'id',width:100">ID</th>
          <th data-options="field:'name',width:200">名称</th>
          <th data-options="field:'price',width:100,align:'right'">价格</th>
        </tr>
      </thead>
    </table>
    <div style="margin-top:10px;">
      <a href="#" class="easyui-linkbutton" onclick="getSelected()">获取选中数据</a>
      <a href="#" class="easyui-linkbutton" onclick="deleteSelected()">删除选中行</a>
    </div>
  </div>
  <script>
    // 示例数据
    var data = {
      rows: [
        { id: 1, name: '产品 1', price: 10.5 },
        { id: 2, name: '产品 2', price: 20.75 },
        { id: 3, name: '产品 3', price: 15.0 },
        { id: 4, name: '产品 4', price: 25.0 }
      ]
    };
    $('#dg').datagrid('loadData', data);

    // 获取选中数据
    function getSelected() {
      var rows = $('#dg').datagrid('getSelections');
      if (rows.length > 0) {
        alert('选中行数: ' + rows.length + '\n数据: ' + JSON.stringify(rows));
      } else {
        alert('未选中任何行');
      }
    }

    // 删除选中行
    function deleteSelected() {
      var rows = $('#dg').datagrid('getSelections');
      if (rows.length > 0) {
        for (var i = rows.length - 1; i >= 0; i--) {
          var index = $('#dg').datagrid('getRowIndex', rows[i]);
          $('#dg').datagrid('deleteRow', index);
        }
        $.messager.alert('提示', '成功删除 ' + rows.length + ' 行');
      } else {
        $.messager.alert('提示', '请先选择要删除的行');
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 显示 4 行数据，每行左侧有复选框，列头有全选复选框。
  • 点击“获取选中数据”显示选中行的 JSON 数据。
  • 点击“删除选中行”移除选中的行，并弹出提示。
  • 控制台记录选中和取消选中的操作日志。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 用户反馈：操作后通过提示框（如 $.messager.alert）告知用户结果。
  • 复选框宽度：设置合理的宽度（如 width:50），避免影响布局。

5.2 性能优化与调试

  • 性能：大数据量时，批量操作（如删除）可能影响性能，建议分批处理。
  • 调试：使用 onCheck 和 onUncheck 事件检查选中状态，确保逻辑正确。

6. 结论

jQuery EasyUI 的数据网格通过复选框功能支持灵活的行选择，适用于批量操作场景。本文通过基础和高级示例展示了实现过程，帮助你快速上手。如果需要分页支持，可参考 自定义分页 或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础复选框到带操作的高级功能，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 添加基础复选框。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可。

请确认此回答是否符合您的期望，或者提出下一个问题，我将继续按此格式回答！