转载

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

 

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

DEMO功能说明:

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

 

功能演示:

        1. 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
文章最后发布于: 2013-03-28 16:45:54
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 鲸 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览