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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Prototype Class对象学习
Jul 19 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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 session和cookie使用说明
2010/04/07 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python pygame实现五子棋小游戏
2020/10/26 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
促销活动方案模板
2014/02/24 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python