异常教程

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）中的行，开发者可以轻松实现排序、分类或关联操作的可视化交互。对于编程初学者和中级开发者而言，这一功能既实用又具备学习价值。本文将从基础概念出发，结合代码示例和实际案例，逐步讲解如何实现数据网格行的拖放功能，并探讨其背后的实现原理与进阶技巧。

一、基础概念与准备工作

1.1 什么是 jQuery EasyUI 数据网格？

jQuery EasyUI 是一个基于 jQuery 的 UI 框架，提供了一系列常用的 UI 组件，如数据网格（DataGrid）、树形菜单（Tree）、选项卡（Tabs）等。其中，数据网格是用于展示和操作表格数据的核心组件，支持分页、排序、过滤等功能。

形象比喻：数据网格就像 Excel 表格的 Web 版本，开发者可以将其嵌入到网页中，让用户直观地查看和管理数据。

12.2 拖放功能的意义

拖放（Drag-and-Drop，简称 DnD）允许用户通过鼠标直接拖动页面元素到目标位置，例如将文件拖入回收站或调整列表项的顺序。在数据网格中实现行拖放，可以让用户：

  • 快速调整数据顺序：如排序任务优先级。
  • 分类管理数据：如将客户分组到不同的项目中。
  • 增强操作直观性：减少点击按钮或输入指令的步骤。

13.3 开发环境准备

在开始前，请确保已安装以下工具：

  • jQuery（版本 1.8+）
  • jQuery EasyUI（版本 1.7+）
  • 任意代码编辑器（如 VS Code）

二、实现数据网格行拖放的步骤

21.1 基础配置：启用拖放功能

首先，需要在数据网格的配置中启用拖放功能。通过设置 rowDraggable 属性为 true，即可快速开启行拖放的基本功能。

示例代码：基础拖放配置

<table id="dg" class="easyui-datagrid"  
       data-options="  
           url: 'data.json',  
           rowDraggable: true,  
           columns: [[  
               {field: 'id', title: 'ID', width: 100},  
               {field: 'name', title: 'Name', width: 200}  
           ]]  
       ">  
</table>

关键点说明：

  • rowDraggable: true：启用行拖放功能。
  • 数据网格会自动为每行添加拖动手柄（默认为行首的图标）。

22.2 自定义拖放行为

默认的拖放功能可能无法满足所有需求，开发者可以通过以下方式进一步定制：

22.2.1 指定拖动手柄

若希望用户仅能通过特定列（如“操作”列）拖动行，可以设置 dragHandle 属性：

$('#dg').datagrid({  
    dragHandle: '.drag-handler'  // 指定具有该类名的元素为拖动手柄  
});

在 HTML 列定义中添加对应类名：

{field: 'action', title: '操作',  
 template: '<div class="drag-handler">拖拽图标</div>',  
 width: 80}

22.2.2 禁用特定行的拖放

通过 onBeforeRowDrag 事件，可以动态判断某行是否可拖动：

$('#dg').datagrid({  
    onBeforeRowDrag: function (e) {  
        var row = $(this).datagrid('getRows')[e.rowIndex];  
        return row.status !== 'completed'; // 禁用状态为“已完成”的行  
    }  
});

三、进阶技巧与常见问题

31.1 跨表格拖放：实现行的跨容器移动

除了在同一数据网格内拖放，还可以让行在多个表格之间移动。例如，将客户从“待处理”列表拖到“已处理”列表。

实现步骤：

  1. 为两个表格绑定拖放事件：
$('#dg1').datagrid({  
    rowDraggable: true,  
    onRowDrop: function(targetRow, sourceRow) {  
        // 处理拖入操作  
    }  
});  

$('#dg2').datagrid({  
    rowDraggable: true,  
    onRowDrop: function(targetRow, sourceRow) {  
        // 处理拖入操作  
    }  
});
  1. 自定义拖放规则：通过 onBeforeRowDrop 确保行只能拖到目标表格：
onBeforeRowDrop: function(targetRow, sourceRow) {  
    return $(this).attr('id') === 'dg2'; // 仅允许拖入到 dg2  
}

32.2 保存拖放后的顺序到后端

拖放操作完成后，通常需要将新的行顺序提交到服务器。可以通过以下步骤实现：

示例代码：

$('#dg').datagrid({  
    onAfterRowDrop: function(targetRow, sourceRow) {  
        var rows = $(this).datagrid('getRows');  
        var ids = rows.map(function(row) { return row.id; });  
        $.post('/save-order', { order: ids }); // 提交到后端  
    }  
});

四、完整案例：实现可拖放的任务管理列表

41.案例目标

创建一个任务管理界面，允许用户通过拖放调整任务优先级，并实时保存到服务器。

42.HTML 结构

<div class="task-container">  
    <h3>待办任务</h3>  
    <table id="todo-dg" class="easyui-datagrid">...</table>  
</div>  

<div class="task-container">  
    <h3>已完成</h3>  
    <table id="done-dg" class="easyui-datagrid">...</table>  
</div>

43.JavaScript 配置

// 配置待办任务表格  
$('#todo-dg').datagrid({  
    url: '/api/tasks',  
    rowDraggable: true,  
    dragHandle: '.drag-handler',  
    columns: [[  
        {field: 'id', title: 'ID', width: 80},  
        {field: 'title', title: '任务标题', width: 200},  
        {field: 'priority', title: '优先级', width: 100},  
        {  
            field: 'action',  
            title: '操作',  
            template: '<div class="drag-handler">_drag_</div>',  
            width: 50  
        }  
    ]],  
    // 禁用已完成任务的拖放  
    onBeforeRowDrag: function() {  
        return !this.row.done;  
    },  
    // 拖放到“已完成”表格时更新状态  
    onRowDrop: function(targetRow, sourceRow) {  
        if ($(this).attr('id') === 'done-dg') {  
            targetRow.done = true;  
            this.updateRow(targetRow);  
        }  
    }  
});  

// 配置已完成表格  
$('#done-dg').datagrid({  
    rowDraggable: true,  
    // 禁止拖入非完成状态的任务  
    onBeforeRowDrop: function() {  
        return this.row.done;  
    }  
});

44.效果与扩展性

  • 用户可将任务从“待办”拖到“已完成”以标记完成。
  • 拖放后，任务状态会实时更新，并可通过 onAfterRowDrop 触发保存操作。
  • 可进一步扩展：添加拖放动画、错误提示或批量操作功能。

五、常见问题与解决方案

51.拖放后数据未更新到后端

原因：未在 onAfterRowDrop 中调用 AJAX 提交。
解决方案：在事件中添加数据提交逻辑，如：

onAfterRowDrop: function() {  
    const newOrder = this.datagrid('getRows').map(row => row.id);  
    $.post('/update-order', { order: newOrder });  
}

52.跨表格拖放时目标表格无法接收

原因：目标表格未设置 rowDraggable: true 或未定义 onBeforeRowDrop。
解决方案：确保目标表格的配置包含：

$('#target-dg').datagrid({  
    rowDraggable: true,  
    onBeforeRowDrop: function() { return true; } // 允许任何拖入  
});

六、总结与展望

通过本文的讲解，开发者可以掌握 jQuery EasyUI 扩展 – 数据网格行拖放 的核心实现方法，并通过案例理解其应用场景。这一功能不仅提升了用户交互的直观性，还为复杂的数据管理需求提供了灵活的解决方案。

未来，随着 Web 开发对交互体验的持续优化，数据网格的拖放功能可能会进一步结合动画效果、触摸屏适配等技术。建议开发者在实践中不断探索，例如：

  • 使用 CSS3 实现更流畅的拖放动画；
  • 结合 Vue.js 或 React，实现响应式数据绑定；
  • 添加权限控制，限制特定用户组的拖放操作。

通过不断学习和实践，开发者可以将这一技能灵活运用于项目中，为用户提供更友好的界面交互体验。

最新发布

查看更多文章