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

阿新 • • 發佈：2019-01-16

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

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

1、單選 2、多選按鈕的排序功能，有興趣的朋友可以自己試一下，就不截圖了，在使用按鈕排序時，請將SingleSelect設定為true <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRecordOrde

Ext.Net 1.x_Ext.Net.Combox選擇觸發事件

事件：ChangeCurrency <DirectEvents> <Select OnEvent="ChangeCurrency"></Select&g

Ext.Net 1.x_Ext.Net.Panel之列布局

Ext.Net 1.x_Ext.Net. 我經常用到HTML中的表格，如果在EXT.NET 剛開始還真不知道怎麼搞？群裡的APP CAI教我用PANEL 表示感謝！ <ext:Window ID="Window1" runat="server" Collapsib

Ext.Net 1.x_Ext.Net_修改grid行或者列的背景顏色和字型顏色

修改某一列的背景顏色和字型顏色 css程式碼 .x-grid-back-red { background: #FF0000; //修改背景顏色 color:#000000; //修改字型顏色 } JS程式碼 { header : '分成型

Devexpress ASP.NET中ASPxTreeList節點的拖動

估計很少有人知道Dev在ASP.NET中也能拖動節點。這個功能在我們需要對同一棵樹的節點的位置進行調整的時候能用到。前臺樹程式碼： <dx:ASPxTreeList Width="400" ID="trlcustom" ClientInstanceName="trl

不寫1行程式碼，在Mac上體驗ASP.NET 5的最簡單方法

昨天微軟釋出了ASP.NET 5 beta2（詳見ASP.NET 5 Beta2 釋出），對ASP.NET 5的好奇心又被激發了。今天下午在Mac OS X上體驗了一下ASP.NET 5，而且藉助Yeoman generators for ASP.NET 5，可以不用寫1行程式碼，連project.jso

### Teamviewer 手機端怎麽拖動窗口，選中文字

右鍵 teamview 觸摸板長按 view 使用方式文字選中文字窗口 Teamviewer 手機端怎麽拖動窗口，選中文字 Teamviewer 手機端拖動窗口，選中文字和觸摸板的使用方式是一樣的點兩下不松開就可以拖動點兩下不松開也可以選中文字 Teamvi

拖動滾動條，顯示階段資料的值

實現如下圖的操作，拖動紅色塊改變滾動條及塊上的值。該值代表 x 人團購享受 xx% 的折扣下為原始碼，只是沒有圖片 <!DOCTYPE html> <html lang="en"> <head> <met

手指拖動小球移動，點選空白處，小球不跟著移動

package com.example.xxx.circle; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import and

一個可以隨手勢拖動的EditText，點選更改內容，附帶解決軟鍵盤遮擋終極方法

慣例先來看效果圖：最近產品同學的需求，要求定製一個可拖拽可編輯的文字，原本覺得還挺簡單，不就是寫個EditText處理一下touch事件麼，後來做了發現還有些小坑，記錄一下，順便給大家做個參考。試錯首先我嘗試自定義一個EditText，重寫o

Android SeekBar 禁止拖動和點選的實現（可能是最簡單完美的實現）

在播放線上音訊時，需求是不能拖動進度條，讓音訊自然播放。實現就很簡單了，不要和網上的那樣重寫onTouchEvent，沒有必要的，所以一定要了解Android的觸控機制。直接監聽SeekBar

拖動檔案到瀏覽器進行ajax上傳

1.html中div標籤預覽顯示，button標籤觸發上傳事件<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">將圖片拖拽到此</div>

自己動手搞一個拖動滑塊，點選水波紋效果

window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //長線條 var minDiv = document.getElementById('minDiv'); //小方塊

Ext Net 1 x Ext Net Calendar日程管理

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

Ext Net 1 x Ext Net FileUpload上傳檔案

今天在使用ext.net的UploadField控制元件想上傳檔案時，發現examples.ext.net官網上的例子寫的不是很詳細。於是通過網上找資料，結合asp.net的檔案上傳的方法，終於實現了圖片的上傳功能。以下就是實現的程式碼，供大家參考！首先在.aspx檔案中插入一

Ext Net 1 x Ext Net GridPanel 刪除行提示

var gridCommand = function (command, record) { if (command == "Users") { var id = record.data

Ext Net 1 x Ext Net TreeGrid-無限制樹形GUCD

HTML:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Source.aspx.cs" Inherits="DzPlatForm.CRM.Property.Source" %><%@ Reg

Ext Net 1 x Ext Net GridPanel字型格式化顏色配置

日期的處理和格式化是PHP's date() function的一個子集，提供的格式和轉換後的結果將和 PHP 版本的一模一樣。下面列出的就是目前所有支援的格式：Sample date:'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)' 格式

Ext Net 1 x Ext Net GridPanel 之鎖定列

在EXCEL表中經常有需要鎖定列的在GIRDPANEL中如何實現呢？一:列屬性增加LOCKED="TRUE" <Columns> <ext:RowNumbererColumn Locked="true"

解決asp.net web控制元件不能拖動的問題

Tools--Options--HTML Designer--CSS Positioning 把change positioning to ......的CheckBox勾上就OK了。中文版的工具-->選項-->HTML設計器-->CSS定位-->定位選項-->將使用

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

相關推薦