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

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

DEMO功能说明:

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

功能演示:

    1. 1、单选

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

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

2、多选

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

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

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

代码:

ASPX页面

  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>


CS:

  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

教程下载

你可能感兴趣的:(.net)