对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。
DEMO功能说明:
- 1、拖动GridPanel选中行到新位置排序。
- 2、在拖动结束后,重新会选中前面拖动的行。
- 3、拖动排序功能支持Grid单选与多选模式。
- 4、加了【最上】【最下】【上移】【下移】四个按钮排序的功能。目前按钮排序只能在Grid的单选模式下使用。
功能演示:
-
-
1、单选
-
2、多选
按钮的排序功能,有兴趣的朋友可以自己试一下,就不截图了,在使用按钮排序时,请将SingleSelect设置为true
代码:
ASPX页面
- <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="GridRecordOrder.aspx.cs"Inherits="ExtNetSamples.GridDragDrop.GridRecordOrder"%>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <%@RegisterAssembly="Ext.Net"Namespace="Ext.Net"TagPrefix="ext"%>
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headid="Head1"runat="server">
- <title></title>
- <scripttype="text/javascript">
- varnotifyDrop=function(ddSource,e,data){
- vargrid=data.grid;
- varstore=grid.store;
- varrows=grid.getSelectionModel().getSelections();
- varcindex=ddSource.getDragData(e).rowIndex;
- if(cindex==undefined||cindex<0){
- e.cancel=true;
- return;
- }
- //纪录拖放后被拖放纪录的新rowIndex
- vardragDropedRowIndexs=newArray();
- varnewRowIndex=cindex;
- vartotal=store.getTotalCount();
- //当在选中多行拖动调整时,计算新的行索引起始位置
- if((cindex+rows.length)>total){
- newRowIndex=total-rows.length;
- }
- for(vari=0;i<rows.length;i++){
- varrowdata=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(原顺序)
- varhiDargId=store.getById(rows[i].id).get("Order");
- //拖动后的Order(新顺序)
- varnewId=store.getAt(cindex+1).get("Order");
- }
- }
- }
- grid.getSelectionModel().selectRows(dragDropedRowIndexs);
- };
- functionshowErrorMsg(msg){
- Ext.Msg.show({
- title:'错误',
- msg:msg,
- buttons:Ext.Msg.OK,
- icon:Ext.MessageBox.ERROR
- });
- }
- varselectedRowIndex=undefined;
- /*
- *行选中事件
- *参数:model:selectionModel,rowIndex:选中行索引
- */
- varrowSelect=function(model,rowIndex){
- selectedRowIndex=rowIndex;
- }
- functionchangeOrder(grid,commandName){
- if(!grid.getSelectionModel().singleSelect){
- showErrorMsg("使用【最上】【上移】【下移】【最下】按钮调整顺序的方式,暂只支持单选模式,!请设置:ext:RowSelectionModelID=\"RowSelectionModel1\"SingleSelect=\"<b>true</b>\"runat=\"server\"");
- return;
- }
- //获取选中行
- varselectedRow=grid.getSelectionModel().getSelected();
- //如果没有选中行,提示错误
- if(!selectedRow){
- showErrorMsg("请选中要调整顺序的行!");
- return;
- }
- varcindex=undefined;
- varstore=grid.getStore();
- vartotal=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>
- <formid="Form1"runat="server">
- <ext:ResourceManagerID="ResourceManager1"runat="server"/>
- <divstyle="padding-left:20px;">
- <br/>
- <h1>拖动Grid的行调整顺序</h1>
- <pstyle="font-size:12px;">拖动行调整顺序,若只使用拖动来调整行顺序,可支持选中多纪录,但若需要使用【最上】、【上移】、【下移】、【最下】按钮的功能,必须设置单选行模式.</p>
- <br/>
- <ext:StoreID="Store1"runat="server">
- <Reader>
- <ext:JsonReader>
- <Fields>
- <ext:RecordFieldName="Id"/>
- <ext:RecordFieldName="Name"/>
- <ext:RecordFieldName="Sex"/>
- <ext:RecordFieldName="Address"/>
- <ext:RecordFieldName="Order"/>
- </Fields>
- </ext:JsonReader>
- </Reader>
- </ext:Store>
- <ext:PanelID="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:ColumnColumnID="Name"Header="姓名"Width="160"DataIndex="Name"/>
- <ext:ColumnHeader="性别"Width="60"DataIndex="Sex"/>
- <ext:ColumnHeader="地址"Width="60"DataIndex="Address"ColumnID="Address"/>
- <ext:ColumnHeader="顺序"Width="60"DataIndex="Order"/>
- </Columns>
- </ColumnModel>
- <SelectionModel>
- <ext:RowSelectionModelID="RowSelectionModel1"SingleSelect="true"runat="server">
- <Listeners>
- <RowSelectFn="rowSelect"/>
- </Listeners>
- </ext:RowSelectionModel>
- </SelectionModel>
- </ext:GridPanel>
- </Items>
- <BottomBar>
- <ext:ToolbarID="Toolbar1"runat="server">
- <Items>
- <ext:Buttonrunat="Server"ID="BtnTop"Icon="BulletArrowTop"Text="最上">
- <Listeners>
- <ClickHandler="changeOrder(#{GridPanel1},'top')"/>
- </Listeners>
- </ext:Button>
- <ext:ToolbarSpacer/>
- <ext:Buttonrunat="Server"ID="BtnUp"Icon="BulletArrowUp"Text="上移">
- <Listeners>
- <ClickHandler="changeOrder(#{GridPanel1},'up')"/>
- </Listeners>
- </ext:Button><ext:ToolbarSpacer/>
- <ext:Buttonrunat="Server"ID="BtnDown"Icon="BulletArrowDown"Text="下移">
- <Listeners>
- <ClickHandler="changeOrder(#{GridPanel1},'down')"/>
- </Listeners>
- </ext:Button><ext:ToolbarSpacer/>
- <ext:Buttonrunat="Server"ID="BtnBottom"Icon="BulletArrowBottom"Text="最下">
- <Listeners>
- <ClickHandler="changeOrder(#{GridPanel1},'bottom')"/>
- </Listeners>
- </ext:Button>
- <ext:ToolbarFillID="ToolbarFill1"runat="server"/>
- <ext:ButtonID="Button1"runat="server"Text="Reset">
- <Listeners>
- <ClickHandler="Store1.loadData(Store1.proxy.data);"/>
- </Listeners>
- </ext:Button>
- </Items>
- </ext:Toolbar>
- </BottomBar>
- </ext:Panel>
- <ext:DropTargetID="DropTarget1"runat="server"Target="={GridPanel1.getView().mainBody}"Group="DDGroup">
- <NotifyDropFn="notifyDrop"/>
- </ext:DropTarget>
- </div>
- </form>
- </body>
- </html>
CS:
- usingSystem;
- usingSystem.Collections.Generic;
- usingSystem.Linq;
- usingSystem.Web;
- usingSystem.Web.UI;
- usingSystem.Web.UI.WebControls;
- namespaceExtNetSamples.GridDragDrop
- {
- publicpartialclassGridRecordOrder:System.Web.UI.Page
- {
- protectedvoidPage_Load(objectsender,EventArgse)
- {
- List<object>data=newList<object>();
- for(inti=0;i<10;i++)
- {
- data.Add(new
- {
- Id=i,
- Name="Name"+i,
- Sex=i%2==0?"男":"女",
- Address="四川省成都市XX区XX路XX号",
- Order=i
- });
- }
- this.Store1.DataSource=data;
- this.Store1.DataBind();
- }
- }
- }