easyui的dnd插件实现datagrid行拖拽

快来打我* 2022-08-03 13:54 429阅读 0赞

项目中出现一种需求：对某列表中元素进行手动排序，若使用按钮单击来向上或者向下效率低下，若直接手动输入序号更不科学=.=。

因此最好的方式就是能够实现手动拖动某个行到想要的位置。因此首先需要实现datagrid的拖拽操作。其次就是后端的数据处理了。

## dnd插件的实现 ##

超简单。。。。引入datagrid-dnd.js，然后enable之即可。

<script src="./datagrid-dnd.js"></script>

//载入后的触发事件
        onLoadSuccess(data){
            //启用dnd支持
            $('#table').datagrid('enableDnd');
    
            //可选-绑定dnd的触发事件
            $('#table').datagrid({
                onDrop:function(targetRow, sourceRow, point) { 
                    //拖拽某行到指定位置后触发
                    doSomething();
                }
            })
    
        }

## 前端数据的获取 ##

主要涉及对datagrid的数据遍历，获取id以及序号

//获取表格的数据
     var data = $('#table').datagrid('getRows');
     //遍历每行
     $.each(data, function(i ,row){ 
        doSomething(); 
     });

## 参考 ##

*  常用事件

[jQuery EasyUI 扩展 - 数据网格行拖放（Drag and Drop Rows in DataGrid）][jQuery EasyUI _ - _Drag and Drop Rows in DataGrid]

网上中文博客真的很少。。。最近翻不出去了所以不太好找资料

[jQuery EasyUI _ - _Drag and Drop Rows in DataGrid]: http://www.w3cschool.cc/jeasyui/ext-datagrid-dnd.html

发表评论取消回复

表情：

评论列表（有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular table拖拽插件sortablejs

1、npm 安装 sortablejs npm install sortablejs --save // 只用这一个插件就可以实现拖拽，但是 angular 会报：无法找到

古城微笑少年丶/ 2023年06月19日 02:24/ 0 赞/ 34 阅读

相关拖拽插件vuedraggable的使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5

r囧r小猫/ 2023年06月14日 10:55/ 0 赞/ 29 阅读

相关 antd表格结合react-dnd、react-dnd-html5-backend、immutability-helper实现表头拖拽功能

最近公司打算重构老项目，采用的技术是蚂蚁的umi框架、antd design pro 、react16.8以及dva。重构过程中，遇到了很多坑，解决了也收获了很多，在这里先说一

﹏ヽ暗。殇╰゛Y/ 2023年02月14日 10:21/ 0 赞/ 112 阅读

相关 web移动端-实现拖拽的插件 IScroll

在项目工程中，如果自己手动实现拖拽是比较费时间的，所以使用 IScroll插件可以解决这个问题； IScroll插件下载zip后进行解压，在文件夹build里面引入iscr

逃离我推掉我的手/ 2022年12月23日 06:17/ 0 赞/ 315 阅读

相关 react-dnd拖拽排序

App.js import './App.css'; import React, { useState, useCallback, memo, useMemo

短命女/ 2022年10月05日 01:48/ 0 赞/ 485 阅读

相关 easyUI拖拽功能讲解以及多选拖拽的实现

首先我们考虑这样一个业务场景：一个维修部门中分了N个维修组，维修部门的负责人需要将这个部门的维修人员分配到这些组里去。当然，他可以选中一个维修人员，然后给他分配维修组，但是

￡神魔★判官ぃ/ 2022年08月06日 05:04/ 0 赞/ 688 阅读

相关 easyui的dnd插件实现datagrid行拖拽

项目中出现一种需求：对某列表中元素进行手动排序，若使用按钮单击来向上或者向下效率低下，若直接手动输入序号更不科学=.=。因此最好的方式就是能够实现手动拖动某个行到想要的位置

快来打我*/ 2022年08月03日 13:54/ 0 赞/ 430 阅读

相关 JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言：前天刚写了篇[JS组件系列——Bootstrap Table 表格行拖拽][JS_Bootstrap Table]，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时

旧城等待，/ 2022年07月13日 02:54/ 0 赞/ 531 阅读

相关前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX

阳光穿透心脏的1/2处/ 2022年06月09日 08:22/ 0 赞/ 575 阅读

相关 3、EasyUI的可拖拽组件

给元素加上class=”easyui-draggable” <div class="easyui-draggable" style="width:500px;he

深碍√TFBOYSˉ_/ 2022年06月03日 10:58/ 0 赞/ 458 阅读