jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果


Posted in Javascript onAugust 15, 2016

1、实现行的上移、下移、

说明:

1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index属性等。

1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等。将来保存的时候,就是通过取这个属性值找某一行的数据的。

function move(isUp) {
var selections = $dg.datagrid('getSelections');
if(selections.length == 0){
return;
}
var $view = $('div.datagrid-view');
var index = $dg.datagrid('getRowIndex',selections[0]);
var $row = $view.find('tr[datagrid-row-index=' + index + ']');
if (isUp) {
$row.each(function(){
var prev = $(this).prev();
var prevId = prev.attr('id');
var prevDatagridRowIndex = prev.attr('datagrid-row-index');
var thisId = $(this).attr('id');
var thisDatagridRowIndex = $(this).attr('datagrid-row-index');
prev.length && $(this).insertBefore(prev);
$(this).attr('id',prevId);
$(this).attr('datagrid-row-index',prevDatagridRowIndex);
prev.attr('id',thisId);
prev.attr('datagrid-row-index',thisDatagridRowIndex);
});
} else {
$row.each(function(){
var next = $(this).next();
var nextId = next.attr('id');
var nextDatagridRowIndex = next.attr('datagrid-row-index');
var thisId = $(this).attr('id');
var thisDatagridRowIndex = $(this).attr('datagrid-row-index');
next.length && $(this).insertAfter(next);
$(this).attr('id',nextId);
$(this).attr('datagrid-row-index',nextDatagridRowIndex);
next.attr('id',thisId);
next.attr('datagrid-row-index',thisDatagridRowIndex);
});
}
}

2、保存移动的结果

说明:每一个tr包含若干个td,每个td都有field属性,即表格展示对象的相应属性名,例子中goodsId是我要展示的商品的主键。每个td下都包含一个div,通过层层

find找到这个div以后,值就得到了。

function nextStep() {
var arrayData = $dg.datagrid('getData').rows;
var $view = $('div.datagrid-view');
if(arrayData.length!=0){
saveIds = '';
for(var index=0;index<arrayData.length;index++){
var goodsId = $view.find('tr[datagrid-row-index=' + index + ']').find("td[field='goodsId']").find('div').html();
saveIds += goodsId;
if(index != arrayData.length-1){
saveIds += ',';
}
}
$.ajax({
url:'${pageContext.request.contextPath}/coupons/getTemplateId',
type:'post',
dataType:'json',
success:function(result){
window.location.href="${pageContext.request.contextPath}/coupons/tpl"+result+"?goodsId="+saveIds;
}
});
}
}

以上所述是小编给大家介绍的jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
js运动应用实例解析
Dec 28 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 #Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 #Javascript
对js eval()函数的一些见解
Aug 15 #Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 #Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 #Javascript
jQuery学习笔记之回调函数
Aug 15 #Javascript
纯css下拉菜单 无需js
Aug 15 #Javascript
You might like
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
应用英语专业自荐信
2014/01/26 职场文书
会计专业自我评价
2014/02/12 职场文书
出国留学经济担保书
2014/04/01 职场文书
婚前协议书怎么写
2014/04/15 职场文书
应用外语系自荐信
2014/06/26 职场文书
企业读书活动总结
2014/06/30 职场文书
户籍证明格式
2014/09/15 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
实习报告怎么写
2019/06/20 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
Python实现简繁体转换
2021/06/07 Python