欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js表格行上下移动实例代码

程序员文章站 2022-04-10 13:28:21
...
<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表格行上下移动实例代码的详细内容,更多请关注其它相关文章!