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)
@ResponseBody
public 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();
      }
   }
}

以上就是js表格行上下移动实例代码的详细内容，更多请关注其它相关文章！