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

 更新时间:2016年08月15日 10:10:20   作者:izumi  
这篇文章主要介绍了jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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实现单行的上移下移及保存移动的结果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jQuery实现统计复选框选中数量

    jQuery实现统计复选框选中数量

    这里给大家分享一段jQuery实现的统计复选框选中数量的代码,非常的实用,有需要的小伙伴们请带走!
    2014-11-11
  • jQuery表格插件datatables用法汇总

    jQuery表格插件datatables用法汇总

    这篇文章主要介绍了jQuery表格插件datatables用法汇总,DataTables是一个非常强大的表格插件,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JQuery优缺点分析说明

    JQuery优缺点分析说明

    如果你还在犹豫是否要学习一个JavaScript框架,并困惑于选择哪一个框架,那么我推荐你选择jQuery。这并非说其它框架不好,只是jQuery可能是最稳妥和最具回报性的选择。
    2011-04-04
  • jQuery入门 构造函数

    jQuery入门 构造函数

    jQuery入门 构造函数,需要的朋友可以参考下。
    2009-10-10
  • jQuery实现的进度条效果

    jQuery实现的进度条效果

    本文主要给大家介绍的是jQuery实现的进度效果的实例代码,其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式)有需要的小伙伴可以参考下。
    2015-07-07
  • jQuery中:image选择器用法实例

    jQuery中:image选择器用法实例

    这篇文章主要介绍了jQuery中:image选择器用法,实例分析了:image选择器的功能、定义及匹配类型为image的<input>元素时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery函数的第二个参数获取指定上下文中的DOM元素

    jQuery函数的第二个参数获取指定上下文中的DOM元素

    这篇文章主要介绍了jQuery函数的第二个参数获取指定上下文中的DOM元素,需要的朋友可以参考下
    2014-05-05
  • JS自动缩小超出大小的图片

    JS自动缩小超出大小的图片

    在文章的正文中,往往会出现一些超大的图片,把页面撑开变形,影响了美观。用这段JS代码就可解决这个问题,你可以把图片的最大值限定在一定范围内,当图片大小超出这个尺寸后,就会被自动按比例缩小
    2012-10-10
  • javaScript和jQuery自动加载简单代码实现方法

    javaScript和jQuery自动加载简单代码实现方法

    给大家介绍一下利用javaScript和jQuery实现自动加载最简单的代码写法。
    2017-11-11
  • jquery文档操作wrap()方法实例简述

    jquery文档操作wrap()方法实例简述

    这篇文章主要介绍了jquery文档操作wrap()方法,以实例形式简单分析了wrap()方法用某个标签将某个元素包起来的使用技巧,需要的朋友可以参考下
    2015-01-01

最新评论