نمایش مقادیر انتخاب شده از GridView درTextBox توسط jQuery
شنبه 31 مرداد 1394در این پست نشان خواهیم داد که چگونه سطر انتخاب شده در GridView را در یک TextBox خارج از GridViewو توسط jQuery نمایش دهیم.
Visual Studio را باز کرده و یک پروژه جدید در حالت ASP.Net Empty Web Application ایجاد کنید. بعد از ایجاد پروژه، روی نام آن در Solution Explorer راست کلیک کرده و یک WebForm به پروژه ایجاد کنید.
کدهای زیر را در صفحه خود اضافه کنید.
<div align="center">
<table border="1">
<tr>
<td>شماره</td>
<td>
<asp:TextBox ID="txtEmpId" runat="server" />
</td>
</tr>
<tr>
<td>نام</td>
<td>
<asp:TextBox ID="txtEmpName" runat="server" />
</td>
</tr>
<tr>
<td>حقوق</td>
<td>
<asp:TextBox ID="txtEmpSalary" runat="server" />
</td>
</tr>
<tr>
<td>دپارتمان</td>
<td>
<asp:TextBox ID="txtDept" runat="server" />
</td>
</tr>
</table>
<br />
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="EmpId" ItemStyle-CssClass="EmpId" HeaderText="شماره">
<ItemStyle CssClass="EmpId"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="EmpName" ItemStyle-CssClass="EmpName" HeaderText="نام">
<ItemStyle CssClass="EmpName"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="EmpSalary" ItemStyle-CssClass="EmpSalary" HeaderText="حقوق">
<ItemStyle CssClass="EmpSalary"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Dept" ItemStyle-CssClass="Dept" HeaderText="دپارتمان">
<ItemStyle CssClass="Dept"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Select" ID="lnkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#3AC0F2" ForeColor="White"></HeaderStyle>
</asp:GridView>
</div>
همینطور، کدهای زیر را در رویداد PageLoad صفحه بنویسید.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("EmpId");
dt.Columns.Add("EmpName");
dt.Columns.Add("EmpSalary");
dt.Columns.Add("Dept");
dt.Rows.Add(1, "بهار", 75000, "پژوهش");
dt.Rows.Add(2, "مهدی", 18000, "حسابداری");
dt.Rows.Add(3, "آرش", 32000, "فروش");
dt.Rows.Add(4, "لیلا", 34000, "اپراتور");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
یک تگ Script در داخل تگ head صفحه WebForm.aspx اضافه کنید. شما نیاز دارید که یک ارجاع مانند قطعه کد زیر، به jQuery داشته باشید.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
یک تگ Script دیگر در تگ head، بعد از تگ script ی که در بالا گفته شد، اضافه کنید و کدهای زیر را بین آن بنویسید.
<script type="text/javascript">
$("[id*=lnkSelect]").live("click", function () {
$("[id*=txtEmpId]").val($(".EmpId", $(this).closest("tr")).html());
$("[id*=txtEmpName]").val($(".EmpName", $(this).closest("tr")).html());
$("[id*=txtEmpSalary]").val($(".EmpSalary", $(this).closest("tr")).html());
$("[id*=txtDept]").val($(".Dept", $(this).closest("tr")).html());
return false;
});
</script>
اکنون می توانید برنامه دانلود و اجرا کرده و نتیجه را ببینید. تصاویر خروجی در زیر قابل مشاهده است.
- Jquery
- 2k بازدید
- 1 تشکر