(javascript)调整记录的顺序并保存序号

       做项目碰到一个问题，需要动态的调整记录的排列顺序，并更新数据库相应的序号字段。开始并没考虑使用javascript来做，因为感觉自己对于js还是比较弱，没胆量用js来做，于是开始的时候是用的调整顺序的时候提交数据库改变序号来做，我也知道如果这样对于用户体验是个很不好的效果，但是先把这个能跑起来再说，很快这个就弄完了，我也开始思考如何将这个改为js来做，翻看了网上很多资料，终于给我找到小山的blog上面有个功能更多的datagrid的一个例子，参照这个例子我只选取了部分js代码，经过几次修改大体运行无误了。特记录下代码以供自己和看到自己blog的人使用，
   ///代码版权归ocean2000(ocean chou)，请转载使用的时候注明！
  ///edit by ocean chou 
 

  1// JScript 文件
  2   function get_Element(the_ele){
  3        var res;
  4        if((the_ele.firstChild == null)||(the_ele.firstChild =='undefined')) return ;
  5        res = the_ele.firstChild;
  6        if((res.firstChild == null)||(res.firstChild=='undefined')) return;
  7        res = res.firstChild;
  8        if(res.type =='radio') return res;
  9        return(null);
 10     }
 11    
 12     function change_row(line1,line2){
 13      // debugger;
 14       var the_table =document.getElementById('table_sequence');
 15       if((the_table == null)||(the_table =='undefined')){ alert('程序异常'); return;}
 16        var row1 = the_table.rows[line1];
 17        var row2 = the_table.rows[line2];
 18        
 19        row1.swapNode(row2);
 20        
 21        var radio = get_Element(row1);
 22        if(radio != null) radio.checked = true;
 23     }
 24     
 25     function change_select(line1)
 26     {
 27        var the_table =document.getElementById('table_sequence');
 28       if((the_table == null)||(the_table =='undefined')){ alert('程序异常'); return;}
 29        var row1 = the_table.rows[line1];
 30        
 31       if((row1 == null)||(row1 == 'undefined')) return;
 32        
 33        var radio = get_Element(row1);
 34        if(radio != null) radio.checked = true;
 35     }
 36     
 37     function leftselect()
 38     {
 39        var i=0
 40       var selectitem = document.getElementsByName('SelectItem');
 41       flag = false;
 42       //debugger;
 43       if((selectitem ==null)||(selectitem == 'undefined')||(selectitem.length <=0))
 44          return false;
 45       for(i=0;i<selectitem.length;i++)
 46       {
 47          if(selectitem[i].checked == true)
 48            {flag = true;cur_row =i+1;break;}
 49       }
 50       
 51       if(!flag)
 52          { alert('select none');return false;}
 53       if(cur_row==null || cur_row<=1)return;
 54       change_select(i);
 55     }
 56     
 57     function rightselect()
 58     {
 59       var i=0
 60       var selectitem = document.getElementsByName('SelectItem');
 61       flag = false;
 62       //debugger;
 63       if((selectitem ==null)||(selectitem == 'undefined')||(selectitem.length <=0))
 64          return false;
 65       for(i=0;i<selectitem.length;i++)
 66       {
 67          if(selectitem[i].checked == true)
 68            {flag = true;cur_row =i+1;break;}
 69       }
 70       
 71       if(!flag)
 72          { alert('select none');return false;}
 73          
 74       change_select(cur_row+1);
 75     }
 76
 77    function upRow()
 78    {
 79       var i=0
 80       var selectitem = document.getElementsByName('SelectItem');
 81       flag = false;
 82       //debugger;
 83       if((selectitem ==null)||(selectitem == 'undefined')||(selectitem.length <=0))
 84          return false;
 85       for(i=0;i<selectitem.length;i++)
 86       {
 87          if(selectitem[i].checked == true)
 88            {flag = true;cur_row =i+1;break;}
 89       }
 90       
 91       if(!flag)
 92          { alert('select none');return false;}
 93          
 94       event.cancelBubble=true;
 95       
 96       if(cur_row==null || cur_row<=1)return;
 97       change_row(cur_row,--cur_row);
 98    }
 99    
100    function downRow()
101    {
102       var selectitem = document.getElementsByName('SelectItem');
103       var i;
104       flag = false;
105       //debugger;
106       var the_table =document.getElementById('table_sequence');
107       if((selectitem ==null)||(selectitem == 'undefined')||(selectitem.length <=0))
108          return false;
109       for(i=0;i<selectitem.length;i++)
110       {
111          if(selectitem[i].checked == true)
112            {flag = true; cur_row=i+1;break;}
113       }
114       
115       if(!flag)
116          { alert('select none');return false;}
117       event.cancelBubble=true;
118       if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
119       change_row(cur_row,++cur_row);
120       
121    }
122    
123    function Check()
124    {
125        //debugger;
126        var selectitem = document.getElementsByName('SelectItem');
127        if((selectitem ==null)||(selectitem == 'undefined')||(selectitem.length <=0))
128          return false;
129        var hiddenID = document.getElementById('hiddenID');
130        hiddenID.value='';
131        
132       for(i=0;i<selectitem.length;i++)
133       {
134          if(hiddenID.value =='')
135             hiddenID.value = selectitem[i].value;
136          else
137             hiddenID.value = hiddenID.value + '`'+selectitem[i].value;
138       } 
139        
140    }
141

aspx页面的head部分加入

 1 <script type = "Text/javascript">
 2     var cur_row    = null;
 3     var flag = false;
 4     document.onkeydown=function(){
 5    // debugger;
 6     var s = event.keyCode;
 7     if(s == 37)
 8       leftselect();
 9     if(s == 38)
10       upRow();
11     if(s == 39)
12       rightselect();
13     if(s ==40)
14       downRow();
15     }
16    </script>

然后后台通过读取hidden变量的值根据其顺序来得改变记录的顺序同时更新数据库相应字段。

转载于:https://www.cnblogs.com/ocean2000/archive/2007/07/09/810799.html