对于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;}//纪录拖放后被拖放纪录的新rowIndexvar 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

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

Ext.net Grid拖动行排序，【最上】【最下】【上移】【下移】按钮排序
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个. DEMO功能说明: 1.拖动GridPane ...
Ext grid js上移下移样例
function moveup(){//上移 var grid = odin.ext.getCmp('gridid'); var sms = grid.getSelectionMode ...
[Ext JS]5.9 嵌套Grid的实现及注意事项
嵌套网格的效果嵌套网格(Nest Grid) 是每个Grid的行展开后是一个子Grid, 实现的效果如下图: 嵌套网格的实现 Ext JS 直接提供了嵌套网格的实现, 即通过Grid的插件 Ext. ...
[Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
前言延续: [Ext JS 4] 实战之Grid, Tree Gird 动态添加列这一篇. 在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式.归纳一下思路就是: 先显示,后隐藏. 当 ...
[Ext]2.0探索(七)Grid使用介绍
[Ext]2.0探索(七)Grid使用介绍 2008年07月01日星期二 15:25 Ext2.0框架的Grid使用介绍最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强& ...
[Ext JS 4] 实战之Grid, Tree Gird 动态添加行
前言在 [Ext JS 4] 实战之Grid, Tree Gird 动态添加列这一篇中,有介绍到如何动态添加一列 -- 设置新columns 后调用reconfigure 方法. 这里来承接这一篇 ...
[Ext JS 4] 实战之Grid, Tree Gird 动态添加列
前言在Ext js 中, 定义一个Grid 很方便,主要需要的是 1. 定义columns 2. 定义一个store 3. 定义grid var store1 = Ext.create('Ext.d ...
elf section类型_在 498 行极小 OS 上跑标准 ELF 程序
本文首发于在 498 行极小系统跑标准 ELF 程序简介 ELF 在 Linux 系统中作为标准可执行文件格式已经存在了 ~25 年. 如果要在 Linux 下直接研究 ELF,通常很难绕过 Li ...
Yii框架里用grid.CGridView调用pager扩展不显示最后一页按钮的解决
有如下一例,调用zii.widgets.grid.CGridView显示Blog信息,代码如下: 1 $this->widget('zii.widgets.grid.CGridView', 2 ...

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

DEMO功能说明：

功能演示：

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

最新文章

热门文章