异常教程

jQuery EasyUI 数据网格 – 添加复选框（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，数据展示与交互是核心功能之一。jQuery EasyUI 数据网格（DataGrid）作为一款功能强大的开源 UI 框架组件，能够帮助开发者高效实现表格数据的动态加载、分页、排序和筛选等功能。然而，当需要对数据行进行批量操作时，添加复选框（checkbox）便成为关键需求。本文将通过循序渐进的方式，结合实际案例，讲解如何在 EasyUI 数据网格中实现复选框功能，并深入解析其底层逻辑与最佳实践。

一、理解 EasyUI 数据网格与复选框的作用

1.1 数据网格的定位与优势

EasyUI 的数据网格类似于 Excel 表格，能够将后端返回的 JSON 数据以直观的表格形式呈现。它的核心优势在于：

  • 动态渲染：支持异步加载数据，无需页面刷新。
  • 可扩展性：通过配置项可轻松添加分页、排序、工具栏等功能。
  • 响应式设计：适配不同屏幕尺寸，提升用户体验。

1.2 复选框的功能与场景

复选框的常见场景包括：

  • 批量操作：如批量删除、批量修改状态。
  • 数据筛选：通过选中特定行，触发其他交互逻辑（如导出选中数据）。
  • 状态标记：例如标记“已读”或“未读”状态。

比喻：若将数据网格比作超市货架，复选框就像购物车中的勾选按钮，帮助用户快速“打包”所需商品，再执行统一操作。

二、基础配置：在数据网格中添加复选框列

2.1 列定义（columns）的配置

在 EasyUI 数据网格中，复选框通过 field 属性为 ""（空字符串）且 checkbox: true 的列定义实现。以下是基础代码示例：

<table class="easyui-datagrid"  
        title="员工信息表"  
        style="width:100%;height:auto"  
        url="/api/employees"  
        fitColumns="true"  
        rownumbers="true">  
    <thead>  
        <tr>  
            <th field="" checkbox="true"></th>  
            <th field="id" width="80">员工ID</th>  
            <th field="name" width="120">姓名</th>  
            <th field="department" width="150">部门</th>  
            <th field="hireDate" width="120">入职日期</th>  
        </tr>  
    </thead>  
</table>

关键点解释：

  • field 为空字符串时，EasyUI 会自动识别该列为复选框列。
  • checkbox="true" 是启用复选框的核心配置项。

2.2 表格初始化与数据加载

通过 JavaScript 初始化表格时，需确保 url 指向后端数据接口。例如：

$(function() {  
    $('#employeeGrid').datagrid({  
        url: '/api/employees',  
        columns: [[  
            {field: '', checkbox: true},  
            {field: 'id', title: '员工ID'},  
            {field: 'name', title: '姓名'},  
            {field: 'department', title: '部门'},  
            {field: 'hireDate', title: '入职日期'}  
        ]]  
    });  
});

三、进阶操作：复选框事件与数据获取

3.1 监听复选框状态变化

当用户勾选或取消勾选复选框时，可通过 onCheck 和 onUncheck 事件触发自定义逻辑。例如：

$('#employeeGrid').datagrid({  
    // ...其他配置  
    onCheck: function(index, row) {  
        console.log('勾选了第 ' + (index + 1) + ' 行，数据为：', row);  
        // 可在此处统计选中数量，或启用批量操作按钮  
    },  
    onUncheck: function(index, row) {  
        console.log('取消勾选了第 ' + (index + 1) + ' 行，数据为：', row);  
    }  
});

比喻：onCheck 和 onUncheck 就像监控摄像头，实时记录用户的勾选动作，并执行对应的“操作脚本”。

3.2 获取所有选中行数据

通过 getChecked 方法可批量获取选中的行数据：

function getSelectedRows() {  
    var rows = $('#employeeGrid').datagrid('getChecked');  
    if (rows.length > 0) {  
        console.log('选中了 ' + rows.length + ' 条数据：', rows);  
    } else {  
        alert('请至少选择一行数据！');  
    }  
}

3.3 批量操作案例：删除选中行

结合表单提交与后端接口，可实现批量删除功能：

function batchDelete() {  
    var rows = $('#employeeGrid').datagrid('getChecked');  
    if (rows.length === 0) {  
        alert('未选择任何数据！');  
        return;  
    }  
    var ids = rows.map(row => row.id);  
    // 发送 AJAX 请求到后端  
    $.ajax({  
        url: '/api/deleteEmployees',  
        type: 'POST',  
        data: { ids: ids },  
        success: function(response) {  
            $('#employeeGrid').datagrid('reload'); // 刷新表格  
            alert('删除成功！');  
        }  
    });  
}

四、常见问题与解决方案

4.1 复选框未显示或不可用

原因：

  • 列定义中未正确设置 checkbox="true"。
  • 表格数据源（如 JSON）的字段名与 field 不匹配。

解决方案：

  • 检查 HTML 或 JavaScript 中的 columns 配置。
  • 确保后端返回的 JSON 数据字段与表格 field 一致。

4.2 事件触发不灵敏

原因：

  • 表格动态加载或分页时未重新绑定事件。

解决方案：
在表格初始化时使用 onLoadSuccess 事件重新绑定监听器：

$('#employeeGrid').datagrid({  
    onLoadSuccess: function() {  
        // 重新绑定事件逻辑  
    }  
});

4.3 性能优化：处理大数据量时的卡顿

建议：

  • 启用分页功能（pagination: true），避免一次性加载过多数据。
  • 在 onCheck 中避免执行耗时操作，改用异步处理。

五、完整案例：员工管理系统

5.1 HTML 结构

<div style="padding: 10px;">  
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="batchDelete()">批量删除</a>  
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="exportChecked()">导出选中数据</a>  
    <table id="employeeGrid" class="easyui-datagrid" style="width:100%;height:500px">  
        <!-- 列定义与之前相同 -->  
    </table>  
</div>

5.2 JavaScript 实现

$(function() {  
    // 初始化表格  
    $('#employeeGrid').datagrid({  
        url: '/api/employees',  
        fitColumns: true,  
        pagination: true, // 启用分页  
        columns: [[  
            {field: '', checkbox: true},  
            {field: 'id', title: 'ID', width: 80},  
            {field: 'name', title: '姓名', width: 120},  
            {field: 'department', title: '部门', width: 150},  
            {field: 'hireDate', title: '入职日期', width: 120}  
        ]],  
        onLoadSuccess: function() {  
            // 分页加载完成后执行的逻辑  
        }  
    });  
});  

// 导出选中数据  
function exportChecked() {  
    var rows = $('#employeeGrid').datagrid('getChecked');  
    if (rows.length === 0) {  
        alert('未选择任何数据！');  
        return;  
    }  
    // 构造 CSV 格式数据  
    var csvContent = "data:text/csv;charset=utf-8,";  
    csvContent += "ID,姓名,部门,入职日期\n";  
    rows.forEach(row => {  
        csvContent += `${row.id},${row.name},${row.department},${row.hireDate}\n`;  
    });  
    var encodedUri = encodeURI(csvContent);  
    var link = document.createElement("a");  
    link.setAttribute("href", encodedUri);  
    link.setAttribute("download", "selected_employees.csv");  
    document.body.appendChild(link);  
    link.click();  
}

结论

通过本文的讲解，读者应能掌握在 jQuery EasyUI 数据网格中添加复选框 的完整流程，包括列配置、事件监听、数据操作及性能优化。复选框功能虽看似简单，但其背后需要开发者对 EasyUI 的 API 和数据交互逻辑有清晰的理解。建议读者通过以下步骤巩固知识：

  1. 按照示例代码搭建基础的员工管理表格。
  2. 尝试添加“全选/全不选”按钮，并实现对应逻辑。
  3. 探索 EasyUI 的其他高级功能（如自定义工具栏、单元格样式）。

在实际开发中，复选框的灵活运用能显著提升用户体验和系统效率。希望本文能成为您构建复杂数据交互界面的实用指南！

最新发布

查看更多文章