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用ajax方式从后台获取json数据后如何将内容填充到下拉列表
从后台获取json数据,将内容填充到下拉列表,页面做如何处理,接下来,通过本篇文章给大家实例讲解jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表,需要的朋友可以参考下2015-08-08jQuery.cookie.js实现记录最近浏览过的商品功能示例
这篇文章主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下2017-01-01通过jquery-ui中的sortable来实现拖拽排序的简单实例
下面小编就为大家带来一篇通过jquery-ui中的sortable来实现拖拽排序的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论