对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。
<%@ 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>
DEMO功能说明:
- 1、拖动GridPanel选中行到新位置排序。
- 2、在拖动结束后,重新会选中前面拖动的行。
- 3、拖动排序功能支持Grid单选与多选模式。
- 4、加了【最上】【最下】【上移】【下移】四个按钮排序的功能。目前按钮排序只能在Grid的单选模式下使用。
功能演示:
-
1、单选
-
2、多选
按钮的排序功能,有兴趣的朋友可以自己试一下,就不截图了,在使用按钮排序时,请将SingleSelect设置为true
代码:
ASPX页面
- <%@ 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:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- namespace ExtNetSamples.GridDragDrop
- {
- public partial class GridRecordOrder : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- List<object> data = new List<object>();
- for (int i = 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();
- }
- }
- }