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的标签智能验证实现代码

    一直在寻找最快捷方便的信息验证方法,之前自己编过JS版验证但要写很多辅助代码,经过许多次改进,还是觉得太麻烦代码还多,维护起太费尽。
    2010-12-12
  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    从后台获取json数据,将内容填充到下拉列表,页面做如何处理,接下来,通过本篇文章给大家实例讲解jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表,需要的朋友可以参考下
    2015-08-08
  • jQuery.cookie.js实现记录最近浏览过的商品功能示例

    jQuery.cookie.js实现记录最近浏览过的商品功能示例

    这篇文章主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下
    2017-01-01
  • jQuery对象[0]是什么含义?

    jQuery对象[0]是什么含义?

    s[0]倒底是什么?(s为jQuery对象)
    2010-07-07
  • 基于jQuery创建鼠标悬停效果的方法

    基于jQuery创建鼠标悬停效果的方法

    这篇文章主要介绍了基于jQuery创建鼠标悬停效果的方法,实例分析了jQuery实现鼠标特效的原理与详细步骤,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 深入探秘jquery瀑布流的实现

    深入探秘jquery瀑布流的实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
    2016-01-01
  • jquery拖动改变div大小

    jquery拖动改变div大小

    这篇文章主要为大家详细介绍了jquery拖动改变div大小的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • jQuery实现长按按钮触发事件的方法

    jQuery实现长按按钮触发事件的方法

    这篇文章主要介绍了jQuery实现长按按钮触发事件的方法,可应用于手机端应用程序的开发中,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JQuery从头学起第三讲

    JQuery从头学起第三讲

    看了前面两讲的54淘客网友,我想应该对JQuery已经有了个初步的认识,知道如何用JQuery选择器来获取控件的值,今天我们主要讲使用JQuery对常用控件的取值。
    2010-07-07
  • 通过jquery-ui中的sortable来实现拖拽排序的简单实例

    通过jquery-ui中的sortable来实现拖拽排序的简单实例

    下面小编就为大家带来一篇通过jquery-ui中的sortable来实现拖拽排序的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论