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

来源：互联网发布：昆仑决知乎编辑：程序博客网时间：2024/04/30 09:16

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

DEMO功能说明：

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

功能演示：

1、单选

2、多选

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

<%@ 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>

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();        }    }}

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