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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
测试php函数的方法
2013/11/13 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python解析文件示例
2014/01/23 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python中请不要再用re.compile了
2019/06/30 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
linux面试题参考答案(11)
2016/11/26 面试题
大学生如何写自荐信
2014/01/08 职场文书
先进个人获奖感言
2014/01/24 职场文书
策划总监岗位职责
2014/02/16 职场文书
个性车贴标语
2014/06/24 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
村主任当选感言
2015/08/01 职场文书