记录点滴

记录生活

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  67 随笔 :: 2 文章 :: 233 评论 :: 17万 阅读
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

一个表格里面有多行数据,可能你有把某一行,上移 ,下移,移到第一移,最后一行的需求.

为了方便,使用Asp.net中的DataGrid来实现表格.

DataGrid代码

<asp:datagrid id=DataGrid1  runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="Email" HeaderText="Email"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="操作">
<ItemTemplate>
<INPUT type=button value=First onclick="Move_first(this)">
<INPUT type=button value=Up onclick="Move_up(this)">
<INPUT type=button value=Down onclick="Move_down(this)">
<INPUT type=button value=Last onclick="Move_last(this)">
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

 

JavaScript代码

    <script language=javascript>
             function Move_up(src)
       {        
         var rowIndex=src.parentElement.parentElement.rowIndex;
         if (rowIndex>=2)
           change_row(rowIndex-1,rowIndex);      
       }
      
       function Move_down(src)
       {
         var rowIndex=src.parentElement.parentElement.rowIndex;
         var tl = document.getElementById("DataGrid1");
         if (rowIndex<tl.rows.length-1)
           change_row(rowIndex+1,rowIndex);
       }
      
       function Move_first(src)
       {
         change_row(1,src.parentElement.parentElement.rowIndex);
       }
      
       function Move_last(src)
       {
          var tl = document.getElementById("DataGrid1");
          change_row(tl.rows.length-1,src.parentElement.parentElement.rowIndex);            
       }
      
      function change_row(line1,line2)
      {
         var tl = document.getElementById("DataGrid1");
         tl.rows[line1].swapNode(tl.rows[line2]);
      }

    </script>

后台读取数据,填充到DataGrid省略.

实际上在表格里面交换两行非常容易.

var tl = document.getElementById("DataGrid1");
tl.rows[line1].swapNode(tl.rows[line2]);

DataGrid1是要交换的表名,line1,line2是要交换的两行的行索引,从0开始计数.

swapNode交换的方法.

src.parentElement.parentElement.rowIndex是得到按钮所在行的行索引,

因为按钮的父结点是<td>,<td>的父结点才是<tr>也就是行,所以用了两次parentElement.

if (rowIndex>=2) 因为表头不参予交换,所以这里面是>=2,如果没有表头,或者表头也要参予交换,

则改写为>=1.

posted on   啊峰  阅读(1359)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示