Ext.net Grid拖动行排序，【最上】【最下】【上移】【下移】按钮排序

最新推荐文章于 2013-08-07 09:31:00 发布
最新推荐文章于 2013-08-07 09:31:00 发布
阅读量801 收藏 1
点赞数
文章标签： button server ext function header assembly
 

 

 对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。

DEMO功能说明：

  • 1、拖动GridPanel选中行到新位置排序。
  • 2、在拖动结束后，重新会选中前面拖动的行。
  • 3、拖动排序功能支持Grid单选与多选模式。
  • 4、加了【最上】【最下】【上移】【下移】四个按钮排序的功能。目前按钮排序只能在Grid的单选模式下使用。

 

功能演示：

    1. 1、单选

 

2、多选

 

按钮的排序功能，有兴趣的朋友可以自己试一下，就不截图了，在使用按钮排序时，请将SingleSelect设置为true

 

代码：

ASPX页面

view plain copy to clipboard print ?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRecordOrder.aspx.cs" Inherits="ExtNetSamples.GridDragDrop.GridRecordOrder" %>  
  2.   
  3.   
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>  
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head id="Head1" runat="server">  
  8.     <title></title>  
  9.  <script type="text/javascript">  
  10.      var notifyDrop = function (ddSource, e, data) {  
  11.          var grid = data.grid;  
  12.          var store = grid.store;  
  13.          var rows = grid.getSelectionModel().getSelections();  
  14.          var cindex = ddSource.getDragData(e).rowIndex;  
  15.          if (cindex == undefined || cindex < 0) {  
  16.              e.cancel = true;  
  17.              return;  
  18.          }  
  19.   
  20.          //纪录拖放后被拖放纪录的新rowIndex  
  21.          var dragDropedRowIndexs = new Array();  
  22.   
  23.          var newRowIndex = cindex;  
  24.          var total = store.getTotalCount();  
  25.          //当在选中多行拖动调整时，计算新的行索引起始位置  
  26.          if ((cindex + rows.length) > total) {  
  27.              newRowIndex = total - rows.length;  
  28.          }  
  29.   
  30.          for (var i = 0; i < rows.length; i++) {  
  31.              var rowdata = store.getById(rows[i].id);  
  32.              if (!this.copy) {  
  33.                  store.remove(store.getById(rows[i].id));  
  34.                  store.insert(cindex, rowdata);  
  35.                  dragDropedRowIndexs[i] = newRowIndex + i;  
  36.   
  37.                  if (parseInt(cindex + 1) < parseInt(total)) {  
  38.                     /*  
  39.                      *  通过这里取得拖动后的顺序，可处理自己的逻辑，比如存数据库  
  40.                      */  
  41.                     //拖动行的Order（原顺序）  
  42.                      var hiDargId = store.getById(rows[i].id).get("Order");  
  43.                      //拖动后的Order(新顺序)  
  44.                      var newId = store.getAt(cindex + 1).get("Order");  
  45.                        
  46.                  }  
  47.              }  
  48.          }  
  49.          grid.getSelectionModel().selectRows(dragDropedRowIndexs);  
  50.      };  
  51.   
  52.      function showErrorMsg(msg) {  
  53.          Ext.Msg.show({  
  54.              title: '错误',  
  55.              msg: msg,  
  56.              buttons: Ext.Msg.OK,  
  57.              icon: Ext.MessageBox.ERROR  
  58.          });  
  59.      }  
  60.   
  61.      var selectedRowIndex = undefined;  
  62.      /*  
  63.       * 行选中事件  
  64.       *参数：model:selectionModel,rowIndex:选中行索引  
  65.       */  
  66.      var rowSelect = function (model, rowIndex) {  
  67.          selectedRowIndex = rowIndex;  
  68.      }  
  69.   
  70.      function changeOrder(grid, commandName) {  
  71.          if (!grid.getSelectionModel().singleSelect) {  
  72.              showErrorMsg("使用【最上】【上移】【下移】【最下】按钮调整顺序的方式，暂只支持单选模式,！请设置:ext:RowSelectionModel ID=\"RowSelectionModel1\" SingleSelect=\"<b>true</b>\" runat=\"server\"");  
  73.              return;  
  74.          }  
  75.   
  76.          //获取选中行  
  77.          var selectedRow = grid.getSelectionModel().getSelected();  
  78.          //如果没有选中行，提示错误  
  79.          if (!selectedRow) {  
  80.              showErrorMsg("请选中要调整顺序的行！");  
  81.              return;  
  82.          }  
  83.   
  84.          var cindex = undefined;  
  85.          var store = grid.getStore();  
  86.          var total = store.getTotalCount();  
  87.   
  88.          store.remove(selectedRow);  
  89.          switch (commandName) {  
  90.              case "top":  
  91.                  cindex = 0;  
  92.                  store.insert(cindex, selectedRow);  
  93.                  break;  
  94.              case "bottom":  
  95.                  cindex = total -1;  
  96.                  store.insert(cindex, selectedRow);  
  97.                  break;  
  98.              case "up":  
  99.                  if (selectedRowIndex != undefined && selectedRowIndex > 0) {  
  100.                      cindex = selectedRowIndex - 1;  
  101.                      store.insert(cindex, selectedRow);  
  102.                  }  
  103.                  else {  
  104.                      cindex = 0;  
  105.                      store.insert(cindex, selectedRow);  
  106.                  }  
  107.                  break;  
  108.              case "down":  
  109.                  if (selectedRowIndex != undefined && selectedRowIndex < total -1) {  
  110.                      cindex = selectedRowIndex + 1;  
  111.                      store.insert(cindex, selectedRow);  
  112.                  }  
  113.                  else {  
  114.                      cindex = total -1;  
  115.                      store.insert(cindex, selectedRow);  
  116.                  }  
  117.                  break;  
  118.              default:  
  119.                  showErrorMsg("没有找到正确的CommandName!");  
  120.          }  
  121.          //重新选中行  
  122.          grid.getSelectionModel().selectRow(cindex);  
  123.      }  
  124.  </script>  
  125. </head>  
  126. <body>  
  127.     <form id="Form1" runat="server">  
  128.         <ext:ResourceManager ID="ResourceManager1" runat="server" />  
  129.         <div style="padding-left:20px;">  
  130.         <br />  
  131.         <h1>拖动Grid的行调整顺序</h1>  
  132.           
  133.         <p style="font-size:12px;">拖动行调整顺序，若只使用拖动来调整行顺序，可支持选中多纪录，但若需要使用【最上】、【上移】、【下移】、【最下】按钮的功能，必须设置单选行模式.</p>      
  134.         <br />  
  135.         <ext:Store ID="Store1" runat="server">  
  136.             <Reader>  
  137.                 <ext:JsonReader>  
  138.                     <Fields>  
  139.                         <ext:RecordField Name="Id" />  
  140.                         <ext:RecordField Name="Name" />  
  141.                         <ext:RecordField Name="Sex" />  
  142.                         <ext:RecordField Name="Address" />  
  143.                         <ext:RecordField Name="Order" />  
  144.                     </Fields>  
  145.                 </ext:JsonReader>  
  146.             </Reader>  
  147.         </ext:Store>  
  148.           
  149.         <ext:Panel ID="Panel1" runat="server" Width="650" Height="300" Layout="FitLayout" Frame="true">  
  150.             <Items>                
  151.                         <ext:GridPanel   
  152.                             ID="GridPanel1"   
  153.                             runat="server"   
  154.                             DDGroup="DDGroup"  
  155.                             Draggable="true"  
  156.                             StoreID="Store1"  
  157.                             EnableDragDrop="true"  
  158.                             StripeRows="true"  
  159.                             AutoExpandColumn="Address"  
  160.                             Width="325"  
  161.                             Title="Left">  
  162.                             <ColumnModel>  
  163.                                 <Columns>  
  164.                                     <ext:Column ColumnID="Name" Header="姓名" Width="160" DataIndex="Name" />  
  165.                                     <ext:Column Header="性别" Width="60" DataIndex="Sex" />  
  166.                                     <ext:Column Header="地址" Width="60" DataIndex="Address" ColumnID="Address" />  
  167.                                         <ext:Column Header="顺序" Width="60" DataIndex="Order" />  
  168.                                 </Columns>  
  169.                             </ColumnModel>  
  170.                             <SelectionModel>  
  171.                                 <ext:RowSelectionModel ID="RowSelectionModel1" SingleSelect="true" runat="server">  
  172.                                 <Listeners>  
  173.                                 <RowSelect Fn="rowSelect" />  
  174.                                 </Listeners>  
  175.                                 </ext:RowSelectionModel>  
  176.                             </SelectionModel>  
  177.                         </ext:GridPanel>                     
  178.             </Items>              
  179.             <BottomBar>  
  180.                 <ext:Toolbar ID="Toolbar1" runat="server">  
  181.                     <Items>  
  182.                     <ext:Button runat="Server" ID="BtnTop" Icon="BulletArrowTop" Text="最上">  
  183.                     <Listeners>  
  184.                     <Click Handler="changeOrder(#{GridPanel1},'top')" />  
  185.                     </Listeners>  
  186.                     </ext:Button>  
  187.                     <ext:ToolbarSpacer />  
  188.                     <ext:Button runat="Server" ID="BtnUp" Icon="BulletArrowUp" Text="上移">  
  189.                     <Listeners>  
  190.                     <Click Handler="changeOrder(#{GridPanel1},'up')" />  
  191.                     </Listeners>  
  192.                     </ext:Button>   <ext:ToolbarSpacer />  
  193.                     <ext:Button runat="Server" ID="BtnDown" Icon="BulletArrowDown" Text="下移" >  
  194.                     <Listeners>  
  195.                     <Click Handler="changeOrder(#{GridPanel1},'down')" />  
  196.                     </Listeners>  
  197.                     </ext:Button>   <ext:ToolbarSpacer />  
  198.                     <ext:Button runat="Server" ID="BtnBottom" Icon="BulletArrowBottom" Text="最下">  
  199.                     <Listeners>  
  200.                     <Click Handler="changeOrder(#{GridPanel1},'bottom')" />  
  201.                     </Listeners>  
  202.                     </ext:Button>  
  203.                         <ext:ToolbarFill ID="ToolbarFill1" runat="server" />  
  204.                         <ext:Button ID="Button1" runat="server" Text="Reset">  
  205.                             <Listeners>  
  206.                                 <Click Handler="Store1.loadData(Store1.proxy.data);" />  
  207.                             </Listeners>  
  208.                         </ext:Button>  
  209.                     </Items>  
  210.                 </ext:Toolbar>  
  211.             </BottomBar>  
  212.         </ext:Panel>   
  213.           
  214.         <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.getView().mainBody}" Group="DDGroup">  
  215.             <NotifyDrop Fn="notifyDrop" />  
  216.         </ext:DropTarget>   
  217.         </div>  
  218.     </form>      
  219. </body>  
  220. </html>  


 

CS：

view plain copy to clipboard print ?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace ExtNetSamples.GridDragDrop  
  9. {  
  10.     public partial class GridRecordOrder : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             List<object> data = new List<object>();  
  15.   
  16.             for (int i = 0; i < 10; i++)  
  17.             {  
  18.                 data.Add(new  
  19.                 {  
  20.                     Id = i,  
  21.                     Name = "Name " + i,  
  22.                     Sex = i % 2 == 0 ? "男" : "女",  
  23.                     Address = "四川省成都市XX区XX路XX号",  
  24.                     Order = i  
  25.                 });  
  26.             }  
  27.   
  28.             this.Store1.DataSource = data;  
  29.             this.Store1.DataBind();  
  30.         }  
  31.   
  32.     }  
  33. }  

 DEMO下载地址：http://download.csdn.net/download/llxchen/3687672

 教程下载

ahoal
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.Net 1.x_Ext.Net.Grid拖动行排序，【最上】【最下】【上移】【下移】按钮排序
德仔
03-28 4802
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束后，重新会选中前面拖动的行。 3、拖动排序功能支持Grid单选与多选模式。 4、加了【最上】【最下】【上移】【下移】四个按钮排序的功能。目前按钮排序只
Ext.net实现GridPanel拖动行、上移下移排序功能DEMO
10-16
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束后，重新会选中前面拖动的行。 3、拖动排序功能支持Grid单选与多选模式。 4、加了【最上】【最下】【上移】【下移】四个按钮排序的功能。目前按钮排序只能在Grid的单选模式下使用。 实现说明与功能演示请见我的Blog
Ext.Net GridPanel中式排序
weixin_30315435的博客
10-23 118
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" /> <script type="text/javascript"> Ext.override(Ext.data.Store, { applySort: fun...
asp.net Ext grid 显示列表
10-29
asp.net Ext grid 显示列表实现代码。
Ext.NET 3.1破解版
01-17
Ext.NET 3.1破解版,仅供参考和学习!
examples.ext.net-5.zip
10-12
ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。 ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。
Ext.net中的MessageBox的简单应用实现代码
10-28
今天在项目中要用到简单的MessageBox的使用。在Ext.net中没有Winform那么简单，直接写MessageBox.show()的方法。于是就去examples.ext.net的例子网站找，想找到个实际能用的
Extjs中grid行的上移和下移
weixin_30764771的博客
08-07 349
一、将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 1 var up = new Ext.Action({ 2 text : 'Up', 3 icon : 'up.png',//或者添加样式iconCls 4 disabled : true, 5 handler : function() { 6 ...
[ExtNet] GridPanel怎么实现服务器端分页、排序、查询?--Oracel存储过程分页
德仔
09-13 4879
A.前端aspx文件 i.store定义 <ext:Store ID="StoreIma" runat="server" OnRefreshData="StoreIma_OnRefreshData"> <Reader> <ext:JsonReader> <Fields&g...
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
05-04
基于matlab实现实现了基于项目的协同过滤代码，MATLAB实现.rar
各地区年末城镇登记失业人员及失业率.xls
最新发布
05-05
数据来源：中国劳动统计NJ-2023版
企业固定资产信息管理系统设计与实现.doc
05-04
企业固定资产信息管理系统设计与实现.doc
node-v11.14.0-darwin-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v8.9.1-sunos-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v12.10.0-linux-armv7l.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于VB实现的学生成绩管理系统(源代码+系统+开题报告+答辩PPT).zip
05-04
【作品名称】：基于VB实现的学生成绩管理系统(源代码+系统+开题报告+答辩PPT) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
银行信贷管理系统设计与实现-(毕业设计)1.docx
05-04
银行信贷管理系统设计与实现-(毕业设计)1.docx
ext.net 5.3
05-05
Ext.NET 5.3 是一个基于 ASP.NET Core 的 Web 应用程序开发框架，它提供了丰富的 UI 组件和工具，可帮助开发人员快速构建出现代化的 Web 应用程序。Ext.NET 5.3 还支持跨平台开发，可以在 Windows、Linux 和 macOS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值