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静态的url如何传递
May 03 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
关于动态执行代码(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
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Python进阶之递归函数的用法及其示例
2018/01/31 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
浅析Python 责任链设计模式
2020/09/11 Python
CSS3 简写animation
2012/05/10 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
建筑自我鉴定
2013/10/19 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
架构师岗位职责
2013/11/18 职场文书
优秀部门获奖感言
2014/02/14 职场文书
社会工作专业求职信
2014/07/15 职场文书
学习普通话的体会
2014/11/07 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫