js表格行上下移动

<script type="text/javascript">   function tagPosition() {      $(‘#easyTables‘).tabs(‘select‘, ‘输出方式‘);      var rows = $(‘#dgTag‘).datagrid(‘getRows‘);//获取当前页的数据行      //var ary = new Array();      var ary = "";      for (var i = 0; i < rows.length; i++) {         ary += rows[i][‘id‘]+",";      }      ary=ary.substring(0,ary.length-1);

$.ajax({         url:‘../../modelFilter/Position‘,         type:‘POST‘,         data:{"ary" : ary},         success: function(result){            console.log(ary);         }      });   }

//上移动   function datagridRowMove( isUp) {      var rows=$(‘#dgTag‘).datagrid(‘getRows‘);      var rowlength=rows.length;      var selectrow=$(‘#dgTag‘).datagrid(‘getSelected‘);      var rowIndex=$(‘#dgTag‘).datagrid(‘getRowIndex‘, selectrow);      if(rowIndex==0){         $.messager.alert(‘提示‘, ‘顶行无法上移!‘, ‘warning‘);      }else{         $(‘#dgTag‘).datagrid(‘deleteRow‘, rowIndex);//删除一行         rowIndex--;         $(‘#dgTag‘).datagrid(‘insertRow‘, {            index:rowIndex,            row:selectrow         });         $(‘#dgTag‘).datagrid(‘selectRow‘, rowIndex);      }   }   //下移动   function datagridRowMove1( isUp) {      var rows=$(‘#dgTag‘).datagrid(‘getRows‘);      var rowlength=rows.length;      var selectrow=$(‘#dgTag‘).datagrid(‘getSelected‘);      var rowIndex=$(‘#dgTag‘).datagrid(‘getRowIndex‘, selectrow);

$(‘#dgTag‘).datagrid(‘deleteRow‘, rowIndex);//删除一行         rowIndex++;         $(‘#dgTag‘).datagrid(‘insertRow‘, {            index:rowIndex,            row:selectrow         });         $(‘#dgTag‘).datagrid(‘selectRow‘, rowIndex);      if(rowIndex>=rowlength){         $.messager.alert(‘提示‘, ‘最后一行无法下移!‘, ‘warning‘);      }   }</script>
添加onclick="tagPosition()"

后台保存移动后数据
@RequestMapping(value = "/Position", method = RequestMethod.POST)@ResponseBodypublic void position(String ary){   if (ary !=null && !ary.equals("")) {      ModelTag model = new ModelTag();      String[] arr = ary.split(",");      try {         for (int i = 0; i < arr.length; i++) {            model.setId(Integer.parseInt(arr[i]));            model.setTagPosition(i + 1);            modelFilterManager.updataTagEncryption(model);         }         /*model.setId(9600);         model.setModuleId("2017021316419558");         model.setTagPosition(1);         modelFilterManager.updataTagEncryption(model);*/         System.out.println("controller  " + ary);      } catch (Exception e) {         e.printStackTrace();      }   }}

本文来自转载

时间: 2024-11-07 12:10:52

js表格行上下移动的相关文章

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

表格行变换顺序功能(jquery)

周末写了个更改表格行顺序的小功能,直接贴代码 表格部分如下: <table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <tr cid="7.0.0

javascript添加或者删除table表格行代码实例

javascript添加或者删除table表格行代码实例:表格是常用的元素,虽然在布局中已经鲜有使用,已经基本被div css所取代,但是在组织表格数据方面还是有很大的优势的,比使用div css要来的方便,添加或者删除一行也就是其中的tr更是最为常见的操作,下面就通过代码实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

jquery实现的调整表格行tr上下顺序

jquery实现的调整表格行tr上下顺序:表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为了向下兼容到IE6,因为IE6不支持tr:hover这种形式的伪类,而在ff等标准浏览器中是支持的,这样写:      .tablelist td{border:none;border-bottom: 1px solid #d0d9d9;}//注意:td初始状态下是不给背景色的,滑过时才写      所以这段

三.jquery.datatables.js表格编辑与删除

1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php,取表格数据变为: public function initable(){ $db = M('yanfa_project')->select(); // 取$db的长度 // $len =count($db); $item=array(); // 循环将$db二维数组每一项的value取出放一个数组

jquery更改表格行顺序实例

使用jquery写的更改表格行顺序的小功能表格部分: 复制代码代码如下: <table class="table" id="test_table">  < thead> < tr>  < th>时间</th> < th>详情</th>  < th>操作</th> < /tr>  < /thead> < tbody> <