انتخاب خط در GridView با استفاده از جاوااسکریپت <br/> در این مقاله انتخاب خط در GridView با استفاده از جاوااسکرسپت را یاد میگیریم

در این مقاله انتخاب خط در GridView با استفاده از جاوااسکرسپت را یاد میگیریم

با استفاده از این مقاله میتوانیم امکان انتخاب خط های گریدویو رو سمت کاربر با جاواسکریپت فراهم کنیم

به این صورت که کاربر با کلیک روی هر یک از خط ها رنگ پس زمینه آن تغییر میکند و به حالت انتخاب در میاد

در مرحله اول سخترین قسمت کار گرید را چند اسم پر میکنیم

if (!this.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Family") }); dt.Rows.Add(1, "ایمان", "مدائنی"); dt.Rows.Add(2, "سجاد", "باقرزاده"); dt.Rows.Add(3, "علی", "محمدی"); dt.Rows.Add(4, "محسن", "علیزاده"); GridView1.DataSource = dt; GridView1.DataBind(); }

در مرحله بعد انتخاب خط ها توسط جاوااسکریپت انجام میشه

<mce:script type="text/javascript"><!-- $(function () { $("[id*=GridView1] td").bind("click", function () { var row = $(this).parent(); $("[id*=GridView1] tr").each(function () { if ($(this)[0] != row[0]) { $("td", this).removeClass("selected_row"); } }); $("td", row).each(function () { if (!$(this).hasClass("selected_row")) { $(this).addClass("selected_row"); } else { $(this).removeClass("selected_row"); } }); }); }); // --></mce:script>

امیدوارم خوشتون اومده باشه

نمونه ضمیمه شده است

موفق و پیروز باشید