extaspnet 实现2个表格行相互拖拽

来源：互联网发布：mac intellij idea 编辑：程序博客网时间：2024/06/06 16:42

2个表格，可以多选，可以拖来拖去，左拖到右，右拖到左，实现拖拉纯JS,后台可读右表格的值

先上截图

实现思路，extaspnet (截至V2.3.5) 没有提供此方法，但extjs是有的，按惯例，自己写JS

前台代码(完整页面 test2.aspx):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="cm.system.test2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <ext:PageManager ID="PageManager1" runat="server" /> <ext:Toolbar runat="server" > <Items> <ext:Grid ID="Grid1" runat="server" EnableCheckBoxSelect="true" EnableRowNumber="false" Title="单位列表(选好后拖到右表格即可)" EnableMultiSelect="true" AutoScroll="true" Height="300px" AutoWidth="true" > <Columns> <ext:BoundField DataField="UNITID" HeaderText="单位编号" Width="100px" /> <ext:TemplateField Hidden="true"><ItemTemplate>-</ItemTemplate></ext:TemplateField> <ext:BoundField DataField="UNITNAME" HeaderText="单位名称" Width="150px" /> </Columns> </ext:Grid> <ext:ToolbarSeparator runat="server"></ext:ToolbarSeparator> <ext:Grid ID="Grid2" runat="server" EnableCheckBoxSelect="true" EnableRowNumber="false" Title="所选择单位列表" EnableMultiSelect="true" AutoScroll="true" Height="300px" AutoWidth="true" > <Columns> <ext:BoundField DataField="UNITID" HeaderText="单位编号" Width="100px" /> <ext:TemplateField Hidden="true"><ItemTemplate>-</ItemTemplate></ext:TemplateField> <ext:BoundField DataField="UNITNAME" HeaderText="单位名称" Width="150px" /> </Columns> </ext:Grid> </Items> </ext:Toolbar> <ext:Button ID="Button1" runat="server" Text="确定" CssStyle="margin-left:580px" EnablePostBack="false"> </ext:Button> </form> <mce:script type="text/javascript"></mce:script> </body></html>

后台代码:

using System;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;using System.Data.Sql;using System.Data.SqlClient;using System.IO;namespace cm.system{ public partial class test2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGrid(); Button1.OnClientClick = "var s= Ext.getCmp('" + Grid2.ClientID + "').getView().scroller.dom.innerText; "+ "if (s==undefined) {s= Ext.getCmp('" + Grid2.ClientID + "').getView().scroller.dom.textContent} "+ ";__doPostBack('getGriddom',s);"; } else { if (Request.Form["__EVENTTARGET"] == "getGriddom") { ExtAspNet.Alert.Show(Request.Form["__EVENTARGUMENT"].ToString()); } } } #region BindGrid public void BindGrid() { SqlConnection myConnect = new SqlConnection(ConfigurationManager.ConnectionStrings["etConnectionString"].ToString()); String SQL = "select * from unit(nolock)"; SqlDataAdapter custDA = new SqlDataAdapter(SQL, myConnect); myConnect.Open(); DataSet custDS = new DataSet(); custDA.Fill(custDS, "cc"); Grid1.DataKeyNames = new String[] { "UNITID" }; Grid1.DataSource = custDS; Grid1.DataBind(); } #endregion protected override void Render(HtmlTextWriter writer) { StringWriter strWriter = new StringWriter(); base.Render(new HtmlTextWriter(strWriter)); writer.Write(strWriter.ToString() .Replace("enableDragDrop:false", "enableDragDrop:true") .Replace("id:/"" + Grid1.ClientID + "/",", "id:/"" + Grid1.ClientID + "/",ddGroup : 'secondGridDDGroup',") .Replace("id:/"" + Grid2.ClientID + "/",", "id:/"" + Grid2.ClientID + "/",ddGroup : 'firstGridDDGroup',") ); } }}

全部代码如下，在后台取前台gridpanel的store时略微调试了一下，发现IE和Firefox取法还不一样，NND

核心是前台JS写法，这个完全照搬extjs里面的表格drop例子

代码不多解释了，有问题可以提问