"> انتقال سطرهای GridView به DetailsView با استفاده از jQuery | ام اس پی سافت

انتقال سطرهای GridView به DetailsView با استفاده از jQuery

سطرهای GridView

“Drag and Drop” یکی از ویژگی هایی است که تعامل زیادی را به UI می دهد. زمانی که ستون های خیلی زیادی در GridView داریم، لازم است که یک DetailsView برای کاربر فراهم کنیم. این کار معمولا با کلیک بر روی دکمه select در GridView انجام می شود. برای ارائه یک تجربه متفاوت و با تعامل بیشتر به کاربر، می توانیم امکانی را فراهم کنیم که کاربر بتواند هر یک از سطرهای GridView را Drag کرده و در DetailsView بیندازد تا جزئیات آن را نمایش دهد. در این مقاله، با یک مثال نشان می دهیم که چگونه با استفاده از ویژگی های “Draggable” و “Droppable” مربوط به jQuery UI یک سطر از GridView را drag کرده و در DetailsView می اندازیم.

قبل از اینکه پیاده سازی را شروع کنیم، بهتر است که ببینیم ویژگی تعامل draggable و droppable چه امکاناتی را برای ما فراهم می کنند. ویژگی draggable امکان drag کردن هر یک از عناصر DOM را فراهم می کند و Droppable المنت ها را وادار می کند که عنصر drop شده را در خود بپذیرند.

مراحل کار:

جدول MySql ای با ساختار زیر ایجاد می کنیم و آن را با داده های ساختگی پر می کنیم. این داده ها برای پر کردن gridview استفاده می شوند. شما می توانید از دیتابیس های دیگر نیز برای این کار استفاده کنید اما فراموش نکنید که connection string را در کد زیر اصلاح نمایید.

+————-+————-+

| Field       | Type        |

+————-+————-+

| id          | int(11)     | 

| name        | varchar(20) |

| designation | varchar(20) |

| salary      | varchar(20) |

+————-+————-+

آخرین نسخه از jQuery و jQuery UI را دانلود می کنیم. یک فولدر با نام “js” در پروژه ایجاد کرده و کتابخانه های ‘jquery-x.x.x-min.js’ and ‘jqueryui-x.x.x-min.js’ را به آن اضافه می کنیم.

یک web Form به پروژه اضافه می کنیم و کد زیر را در آن می نویسیم.

<html xmlns="http://www.w3.org/1999/xhtml">

	<head runat="server">
	
	<style type="text/css">
	.grd1-header
	{  
	background-color:Maroon;
	border: 3px solid #ffba00;
	color:White;
	}
.grd2-header
{  
	background-color:Green;
	border: 3px solid #ffba00;
	color:White;
	}
.sel-row
	{  
	background-color:Yellow;
	border: 3px solid #ffba00;
	color:Black;
}
.sel-row td
{
cursor:move;
font-weight:bold;
}
</style>
<title>Drag & Drop GridView</title>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var droppedItemIndex = -1;
$('.block').draggable({
helper: "clone",
cursor: "move"
});
$('#<%=DetailsView1.ClientID %>').droppable({
drop: function (ev, ui) {
accept: '.block',
droppedItemIndex = $(ui.draggable).index();
var droppedItem = $(".grd-source tr").eq(droppedItemIndex);
index = -1;
$("[id*=DetailsView1] .name").html(droppedItem.find(".name").html());
$("[id*=DetailsView1] .designation").html(droppedItem.find(".designation").html());

	}
	});
	});
	</script>
	</head>
	<body>
	<form id="form1" runat="server">
	<h1>Drag and Drop GridView Row to another GridView using jQuery</h1>
	<div>
	<table class="ui-corner-top" border="1">
	<tr>
	<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
	onrowcreated="GridView1_RowCreated" CssClass="grd-source" >
	<SelectedRowStyle CssClass="block sel-row" />
	<RowStyle CssClass="block" />
	<HeaderStyle CssClass="grd1-header" />
	<Columns>
	<asp:BoundField DataField="id" HeaderText="ID" ItemStyle-CssClass="id" />
<asp:BoundField DataField="name" HeaderText="NAME" ItemStyle-CssClass="name" />
<asp:BoundField DataField="designation" HeaderText="DESIGNATION"ItemStyle-CssClass="designation" />
	<asp:BoundField DataField="salary" HeaderText="SALARY" ItemStyle-CssClass="salary" />
	</Columns>
	</asp:GridView>
	</td>
	<td valign="middle">
	<asp:DetailsView CssClass="ui-widget" ID="DetailsView1" runat="server"
	Height="50px" Width="125px" AutoGenerateRows="false">
	<Fields>
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-CssClass="name"/>
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-CssClass="designation" />
</Fields>
<HeaderStyle BackColor="Green" ForeColor="White" HorizontalAlign="Center" /> 
<HeaderTemplate> 
	<asp:Label ID="Label1" runat="server" Text="Details" Font-Size="Large"></asp:Label> 
	</HeaderTemplate>
	</asp:DetailsView>
	</td>
	</tr>
</table>  
	</div>
	</form>
	</body>
	</html>

در code-behind صفحه کد زیر را قرار می دهیم:

۰۱	protected void Page_Load(object sender, EventArgs e)
۰۲	        {
۰۳	            //Fetch data from mysql database
۰۴	            MySqlConnection conn = newMySqlConnection("server=localhost;uid=root;password=priya123;database=test; pooling=false;");
۰۵	            conn.Open();
۰۶	            string cmd = "select * from employee";
۰۷	            MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
۰۸	            DataSet objDs = new DataSet();
۰۹	            dAdapter.Fill(objDs);
۱۰	            GridView1.DataSource= objDs.Tables[0];
۱۱	            GridView1.DataBind();
۱۲	            DataTable dt = new DataTable();
۱۳	            objDs.Tables[0].Clear();
۱۴	            dt = objDs.Tables[0];
۱۵	            dt.Rows.Add();
۱۶	            DetailsView1.DataSource = dt;
۱۷	            DetailsView1.DataBind();
۱۸	             
۱۹	        }
۲۰	 
۲۱	 
۲۲	        protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
۲۳	        {
۲۴	            if (e.Row.RowType == DataControlRowType.DataRow)
۲۵	            {
۲۶	                e.Row.Attributes.Add("onmouseover", "this.className='block sel-row'");
۲۷	                e.Row.Attributes.Add("onmouseout", "this.className='block'");
۲۸	            }
۲۹	        }

حال پروژه را build کرده و اجرا می کنیم. حال شما می توانید سطرهای gridview را drag کرده و در DetailsView بیندازید.

توضیح کد:

همان طور که پیش از این گفتیم، ویژگی draggable روی هر یک از عناصر DOM می تواند فعال شود. در کد بالا، به هر سطر از GridView یک کلاس css به نام “.block” اختصاص داده شده و با استفاده از این کلاس css ما امکان draggable را در هر سطر gridView فعال می کنیم.

$('.block').draggable({
۲	                helper: "clone",
۳	                cursor: "move"
۴	            });

گزینه helper با مقدار clone یک کپی از GridView ایجاد کرده تا خود سطر GridView را جا به جا نکند. به همین ترتیب نیز امکان droppable با کد زیر فعال می شود:

$('#<%=DetailsView1.ClientID %>').droppable({
۰۲	                drop: function (ev, ui) {
۰۳	                    accept: '.block',
۰۴	                     droppedItemIndex = $(ui.draggable).index();
۰۵	                    var droppedItem = $(".grd-source tr").eq(droppedItemIndex);
۰۶	                    index = -1;
۰۷	                    $("[id*=DetailsView1] .name").html(droppedItem.find(".name").html());
۰۸	                    $("[id*=DetailsView1] .designation").html(droppedItem.find(".designation").html());
۰۹	 
۱۰	                }
۱۱	            });

در این جا ما مشخص کردیم که هر وقت یک شی با متد drop به داخل DetailsView، Drop شد چه کاری باید انجام شود. گزینه اول، accept:’.block’  عنصر detailsView را وادار می کند که عناصر drag شده را فقط با کلاس css به نام .block بپذیرد. سپس با استفاده از ()index ایندکس عنصر drop شده را مشخص کردیم، در این مثال، ایندکس سطر GridView که drop شده موردنظر است. در نهایت، مقادیر سطر GridView را دریافت کرده و در فیلد مناسب در detailsView قرار می دهیم.

موفق باشید !

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.