easyui中的datagrid行数据如何实现上移和下移

最新推荐文章于 2022-03-23 11:23:00 发布
最新推荐文章于 2022-03-23 11:23:00 发布
阅读量2.3k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjlgwenge/article/details/79718322
版权
本文介绍了如何在EasyUI的datagrid中实现行数据的上移和下移功能。通过js代码实现选中行的删除和插入操作，以达到移动效果。需要注意的是，这种效果仅在页面内存中有效，刷新后会丢失。为持久化移动效果，需将移动后的数据保存到数据库，刷新后重新加载。
摘要由CSDN通过智能技术生成

在easyui的datagrid中，有时候需要将上下行进行上移动或者下移动的操作，那如何实现上移动和下移动呢？

jsp代码：

<div id="contentDiv" data-options="region:'center',title:'人员列表',split:false" style="width:40%">

<table id="人员列表"></table>

</div>

页面的效果图：


js代码实现

$('#人员列表').datagrid({
        toolbar : [{
    iconCls: 'icon-edit',
      text : "上移",
    handler: function(){

最低0.47元/天 解锁文章
zjlgwenge
关注
专栏目录
datagrid实现行的上移和下移
zhao1949的专栏
11-28 3823
jQuery EasyUI Demo function getSelected(){ var row = $('#tt').datagrid('getSelected'); if (row){ alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice); } } function getSel
EasyUI-datagrid-行上下移动
mlxlong
12-02 6275
EasyUI提供了很多行操作方法（行更新：updateRow，行末追加：appendRow，行插入：insertRow，行删除：deleteRow），通过这些方法的组合可以实现多种上下移动的效果。下面是通过删除、插入操作实现上下移动，然后通过getChanges方法获取删除和插入的数据行，并保存到数据库。 一、通过getRows()方法验证是否移动到顶行或末行 var rows=$('#dg'
easyui-datagrid 行【上移】，【下移】
lyghtc的博客
08-01 674
直接源码可以拿来直接使用： 参数说明： index： 行索引 type：‘up’ ， ‘down’ gridname： datagrid id sortname： 排序号（如果不需要可以自行删除，但是列表终归要排序的） mysort:function(index, type, gridname,sortname) { if ("up" == type) { ...
EasyUI dataGrid 行上移，下移，置顶，置底的方法
11-25
EasyUI dataGrid 行上移，下移，置顶，置底的方法。jsp文件
easyui：datagrid行上下移动
u013269813的博客
12-12 456
实例： （1）按钮： 删除 清空工序 上移 下移 （2）function function upMoves(){ var selectrow=$('#selectProcessInfos').datagrid('getSelected');   var rowIndex=$('#selectProcessInfos').datag...
easyUI datagrid 行上移，下移，置顶，置底的方法
07-11
easyUI datagrid 行上移，下移，置顶，置底的方法
easyUI中控制datagrid 行上移 下移 置顶 置底
Strive279的博客
03-23 857
//上移 function MoveUp() { var row = $("#Student_Table").datagrid('getSelected'); var index = $("#Student_Table").datagrid('getRowIndex', row); mysort(index, 'up', 'Student_Table'); } //下移 function MoveDown() { var row = $("#Student_Tab
easyUI datagrid 实现行上移，下移，置顶，置底，排序提交后台绑定键盘事件
最新发布
02-04
easyUI datagrid 实现行上移，下移，置顶，置底，排序提交后台绑定键盘事件
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
11-24
在本文中，我们将探讨如何使用jQuery Easyui的Datagrid组件实现单行的上移和下移功能，并且在操作后保存这些移动的结果。jQuery Easyui Datagrid是一个强大的数据展示工具，它提供了丰富的交互性和自定义选项，使得...
easyui datagrid 行的上下移动实现方式
wddpwzzhao123的专栏
08-01 448
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Easyui datagrid 行上下移动&lt;/title&gt; &
EasyUI实现上下移动
大猴子的专栏
09-22 1704
热点推荐设置                                                .datagrid-view2         {             left:0px;             }                  var lastIndexp;       var tempindexp = -1;    
easyui datagrid实现单行的上移下移，以及保存移动的结果
赵小叔
08-27 4366
开始接触easyui感觉他的封装真是极佳的，善假于物的思想使我们善于站在巨人的肩膀上，人家封装好这么好的插件直接让俺们使用，我们在需求不同可进行简单的调整。
easyui datagrid扩展单行的上移下移
mayuqiang_01的博客
08-30 314
easyui datagrid没有行的上移下移方法，这里扩展了datagrid行的上移和下移，并ajax向后台发送数据，后台保存行排序的序号。 $.extend($.fn.treegrid.methods, { moveUp : function(jq, url) { return jq.each(function() { var node=$(this).treegrid('getSelected'); if (node){ var node_p=$(this).treegr
silverlight 行为浅谈---datagrid数据行上移下移
weixin_30410119的博客
11-15 121
闲来无事，突然想到datagrid控件，虽然列能够拖动，但是行能不能拖动呢？ 上网查了点资料，让人郁闷的是，没有相关例子，于是狠心自己花了点时间写了一个简单的，虽然不能像列那样拖动，但是基本上也能实现行的上移下移了，废话少说，先看图： 思路： 一：加载数据： 　　由于比较简单，所以写了个简单的数据提供程序： 　　　　public class Student { p...
easyUI datagrid 行上移 下移 置顶 置底
hou973561160的博客
11-19 1340
&lt;br&gt;&lt;br&gt;//上移 function MoveUp() { var row = $("#Student_Table").datagrid('getSelected'); var index = $("#Student_Table").datagrid('getRowIndex', row); mysort(index, 'up', 'Stud...
easyui datagrid增加行的上移、下移操作列功能
SuperCookies的博客
09-23 504
easyui datagrid增加行的上移、下移操作列功能 一、方法 操作列增加格式化方法formatter:UpDownFormat； function UpDownFormat(value, row, index) { var gridId='grid';//所操作的表格id值 var dataArr = $("#"+gridId).datagrid('getData'); if(dataArr.rows.length>0){ if (index ==
datagrid行上下移动
12-11 241
var tmOption = { moveUp : function() {//上移 var rows=$('#data_table').datagrid('getRows'); var rowlength=rows.length; ...
easyUI-datagrid导出功能实现：服务与控制器示例
这段代码展示了如何在Java Spring框架下，结合easyUI库和Excel数据导出技术，实现在easyUI-datagrid组件中实现数据的批量导出功能。开发者可以根据实际需求修改列名、方法映射等，以适应不同的业务场景。此外，model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值