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

DEMO功能说明：

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

功能演示：

  1. 1、单选

2、多选

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

代码：

ASPX页面

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRecordOrder.aspx.cs" Inherits="ExtNetSamples.GridDragDrop.GridRecordOrder" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <script type="text/javascript"> var notifyDrop = function (ddSource, e, data) { var grid = data.grid; var store = grid.store; var rows = grid.getSelectionModel().getSelections(); var cindex = ddSource.getDragData(e).rowIndex; if (cindex == undefined || cindex < 0) { e.cancel = true; return; } //纪录拖放后被拖放纪录的新rowIndex var dragDropedRowIndexs = new Array(); var newRowIndex = cindex; var total = store.getTotalCount(); //当在选中多行拖动调整时，计算新的行索引起始位置 if ((cindex + rows.length) > total) { newRowIndex = total - rows.length; } for (var i = 0; i < rows.length; i++) { var rowdata = store.getById(rows[i].id); if (!this.copy) { store.remove(store.getById(rows[i].id)); store.insert(cindex, rowdata); dragDropedRowIndexs[i] = newRowIndex + i; if (parseInt(cindex + 1) < parseInt(total)) { /* * 通过这里取得拖动后的顺序，可处理自己的逻辑，比如存数据库 */ //拖动行的Order（原顺序） var hiDargId = store.getById(rows[i].id).get("Order"); //拖动后的Order(新顺序) var newId = store.getAt(cindex + 1).get("Order"); } } } grid.getSelectionModel().selectRows(dragDropedRowIndexs); }; function showErrorMsg(msg) { Ext.Msg.show({ title: '错误', msg: msg, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR }); } var selectedRowIndex = undefined; /* * 行选中事件 *参数：model:selectionModel,rowIndex:选中行索引 */ var rowSelect = function (model, rowIndex) { selectedRowIndex = rowIndex; } function changeOrder(grid, commandName) { if (!grid.getSelectionModel().singleSelect) { showErrorMsg("使用【最上】【上移】【下移】【最下】按钮调整顺序的方式，暂只支持单选模式,！请设置:ext:RowSelectionModel ID=\"RowSelectionModel1\" SingleSelect=\"<b>true</b>\" runat=\"server\""); return; } //获取选中行 var selectedRow = grid.getSelectionModel().getSelected(); //如果没有选中行，提示错误 if (!selectedRow) { showErrorMsg("请选中要调整顺序的行！"); return; } var cindex = undefined; var store = grid.getStore(); var total = store.getTotalCount(); store.remove(selectedRow); switch (commandName) { case "top": cindex = 0; store.insert(cindex, selectedRow); break; case "bottom": cindex = total -1; store.insert(cindex, selectedRow); break; case "up": if (selectedRowIndex != undefined && selectedRowIndex > 0) { cindex = selectedRowIndex - 1; store.insert(cindex, selectedRow); } else { cindex = 0; store.insert(cindex, selectedRow); } break; case "down": if (selectedRowIndex != undefined && selectedRowIndex < total -1) { cindex = selectedRowIndex + 1; store.insert(cindex, selectedRow); } else { cindex = total -1; store.insert(cindex, selectedRow); } break; default: showErrorMsg("没有找到正确的CommandName!"); } //重新选中行 grid.getSelectionModel().selectRow(cindex); } </script></head><body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <div style="padding-left:20px;"> <br /> <h1>拖动Grid的行调整顺序</h1> <p style="font-size:12px;">拖动行调整顺序，若只使用拖动来调整行顺序，可支持选中多纪录，但若需要使用【最上】、【上移】、【下移】、【最下】按钮的功能，必须设置单选行模式.</p> <br /> <ext:Store ID="Store1" runat="server"> <Reader> <ext:JsonReader> <Fields> <ext:RecordField Name="Id" /> <ext:RecordField Name="Name" /> <ext:RecordField Name="Sex" /> <ext:RecordField Name="Address" /> <ext:RecordField Name="Order" /> </Fields> </ext:JsonReader> </Reader> </ext:Store> <ext:Panel ID="Panel1" runat="server" Width="650" Height="300" Layout="FitLayout" Frame="true"> <Items> <ext:GridPanel ID="GridPanel1" runat="server" DDGroup="DDGroup" Draggable="true" StoreID="Store1" EnableDragDrop="true" StripeRows="true" AutoExpandColumn="Address" Width="325" Title="Left"> <ColumnModel> <Columns> <ext:Column ColumnID="Name" Header="姓名" Width="160" DataIndex="Name" /> <ext:Column Header="性别" Width="60" DataIndex="Sex" /> <ext:Column Header="地址" Width="60" DataIndex="Address" ColumnID="Address" /> <ext:Column Header="顺序" Width="60" DataIndex="Order" /> </Columns> </ColumnModel> <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel1" SingleSelect="true" runat="server"> <Listeners> <RowSelect Fn="rowSelect" /> </Listeners> </ext:RowSelectionModel> </SelectionModel> </ext:GridPanel> </Items> <BottomBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:Button runat="Server" ID="BtnTop" Icon="BulletArrowTop" Text="最上"> <Listeners> <Click Handler="changeOrder(#{GridPanel1},'top')" /> </Listeners> </ext:Button> <ext:ToolbarSpacer /> <ext:Button runat="Server" ID="BtnUp" Icon="BulletArrowUp" Text="上移"> <Listeners> <Click Handler="changeOrder(#{GridPanel1},'up')" /> </Listeners> </ext:Button> <ext:ToolbarSpacer /> <ext:Button runat="Server" ID="BtnDown" Icon="BulletArrowDown" Text="下移" > <Listeners> <Click Handler="changeOrder(#{GridPanel1},'down')" /> </Listeners> </ext:Button> <ext:ToolbarSpacer /> <ext:Button runat="Server" ID="BtnBottom" Icon="BulletArrowBottom" Text="最下"> <Listeners> <Click Handler="changeOrder(#{GridPanel1},'bottom')" /> </Listeners> </ext:Button> <ext:ToolbarFill ID="ToolbarFill1" runat="server" /> <ext:Button ID="Button1" runat="server" Text="Reset"> <Listeners> <Click Handler="Store1.loadData(Store1.proxy.data);" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </BottomBar> </ext:Panel> <ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.getView().mainBody}" Group="DDGroup"> <NotifyDrop Fn="notifyDrop" /> </ext:DropTarget> </div> </form> </body></html>

CS：

view plaincopy to clipboardprint?
  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  7. namespaceExtNetSamples.GridDragDrop
  8. {
  9. publicpartialclassGridRecordOrder:System.Web.UI.Page
  10. {
  11. protectedvoidPage_Load(objectsender,EventArgse)
  12. {
  13. List<object>data=newList<object>();
  14. for(inti=0;i<10;i++)
  15. {
  16. data.Add(new
  17. {
  18. Id=i,
  19. Name="Name"+i,
  20. Sex=i%2==0?"男":"女",
  21. Address="四川省成都市XX区XX路XX号",
  22. Order=i
  23. });
  24. }
  25. this.Store1.DataSource=data;
  26. this.Store1.DataBind();
  27. }
  28. }
  29. }

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

教程下载

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

  1. 算法013：二维数组中的查找-在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断中是否存在

    题目:在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.示例: 现有 ...

  2. Ext.Net 1.x_Ext.Net.Grid拖动行排序，【最上】【最下】【上移】【下移】按钮排序

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

  3. [Ext JS6] Grid 某些行不允许删除和选择的实现

    文章目录 效果比较 Grid的代码 效果实现 效果比较 实现前效果: 实现后效果: 是否可以删除和选择依据editable列的值决定, 为"N"时不允许删除. Grid的代码 列的 ...

  4. 在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。

    题目解析部分 题目中说的这个数组使我们所熟知的杨氏矩阵 拿到一道题的解题思路应该是这样的:先看这道题中所用到的知识点,然后选用合适的类型和返回类型.先用伪代码来将整体思路屡清楚,再用代码去代替 伪代码 ...

  5. 二维数组中的查找--元素从左到右递增，从上到下递增

    在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 首先选取数组中右上角的数字.如果 ...

  6. 1356. 根据数字二进制下 1 的数目排序 golang

    golang的自定义排序 根据数字二进制下 1 的数目排序 给你一个整数数组 arr .请你将数组中的元素按照其二进制表示中数字 1 的数目升序排序. 如果存在多个数字二进制中 1 的数目相同,则必须 ...

  7. swift新手进阶30天一 自定义上图片下文字的UIButton的几种方式

    目前很多app首页功能区都类似工具栏上图标加下文字的方式来自定义按钮.当然,我们也可以用两个控件实现,但是,提升不了我们的逼格.接下来就介绍几种自定义这种上图标下文字的按钮的几种方式.先上图. ![首 ...

  8. Ext grid js上移下移样例

    function moveup(){//上移     var grid = odin.ext.getCmp('gridid');     var sms = grid.getSelectionMode ...

  9. 合并和排序 Linux 上的文件

    在 Linux 上合并和排序文本的方法有很多种,但如何去处理它取决于你试图做什么:你是只想将多个文件的内容放入一个文件中,还是以某种方式组织它,让它更易于使用.在本文中,我们将查看一些用于排序和合并文 ...

最新文章

  1. iframe怎么用_怎么样减少无效URL的爬行和索引
  2. HDU 4635 Strongly connected（缩点、最多可加边数使得仍然非强连通）
  3. Grove Beginner Kits基础实验 Arduino
  4. 宝塔控制面板创建ftp后链接不上的解决方法
  5. vue中key的作用
  6. JavaSE(三)——数组及继承
  7. 数据库 MySQL 如何设置表的主键自增起始值
  8. error : flash system error_求求你，别再用 System.out.println 了！
  9. 三周一套报表开发系统，原来Excel的顶级替代品是它
  10. 2020年商用的5G，中兴通讯已经下了哪些先手棋？
  11. CMU 15-213 Introduction to Computer Systems学习笔记(16) Virtual Memory: Concepts
  12. 美国卡尔顿学院计算机专业怎么样,美国顶尖学院卡尔顿学院
  13. 高德地图之逆地理编码
  14. GameCenter
  15. 2013华为工作之电信客服行
  16. idea报错Cannot run program tomcat的catalina.bat文件或windows无法找到bat文件
  17. 一本书，一个软件思想和创意的T台大道
  18. html游戏手机怎么打开方式,aspx文件怎么打开手机（aspx游戏怎么玩）
  19. 欧姆龙 PLC 程序NJ ST语言EtherCat总线控制24个伺服轴大型程序电池生产线 包括PLC NJ-1400和威纶通触摸屏程序
  20. BDE, dbGo, dbExpress的抉擇

热门文章

  1. Alpha-Beta 剪枝
  2. 一个技术青年的网络失足
  3. TF2.0 API学习（Python）六：函数compute_loss、函数bbox_giou、函数bbox_iou
  4. Docker容器搭建运行python深度学习环境
  5. vscode中使用ssh连接linux（树莓派）opencv不能使用imshow()函数输出图片和视频的解决方法
  6. 收好了！来自摩根大通的算法交易机器学习指南
  7. js仿google+分享新鲜事系统实例源码
  8. Excel万金油公式IINDEX-SMALL-IF-ROW-超级匹配
  9. Java实现SHA1加密
  10. Emlog采集插件 刀网资源采集 一键显示资源1.1