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][&#39;id&#39;]+",";
      }
      ary=ary.substring(0,ary.length-1);

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

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

         $(&#39;#dgTag&#39;).datagrid(&#39;deleteRow&#39;, rowIndex);//删除一行
         rowIndex++;
         $(&#39;#dgTag&#39;).datagrid(&#39;insertRow&#39;, {
            index:rowIndex,
            row:selectrow
         });
         $(&#39;#dgTag&#39;).datagrid(&#39;selectRow&#39;, 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();
      }
   }
}

Atas ialah kandungan terperinci js表格行上下移动实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!