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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 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
星际实力自我测试
2020/03/04 星际争霸
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
python函数形参用法实例分析
2015/08/04 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
详解python基础之while循环及if判断
2017/08/24 Python
python实现用户答题功能
2018/01/17 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python图像和办公文档处理总结
2019/05/28 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python中count函数简单的实例讲解
2020/02/06 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
企划经理的岗位职责
2013/11/17 职场文书
小学少先队活动总结
2015/05/08 职场文书
商场广播稿范文
2015/08/19 职场文书