PDA

View Full Version : jQuery و تغییر رنگ پس زمینه gridview در Asp.net



mohsen_zelzela00
جمعه 14 خرداد 1389, 11:37 صبح
با سلام خدمت اساتید محترم

من می خوام وقتی Mouse رو بر روی رکورد های gridView ببرم رنگ آن رکورد عوض بشه و وقتی که برم سراغ یک رکورد جدید رنگ رکورد قدیمی به حالت خودش برگرده و رنگ رکورد جدید عوض بشه در ضمن می خوام حالت AlternatingRowStyle رو هم پشتیبانی کنه
ممنون میشم اساتید محترم راهنمایی کنند

Behrouz_Rad
جمعه 14 خرداد 1389, 14:29 عصر
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<HeaderStyle BackColor="Blue" />
<AlternatingRowStyle BackColor="Red" />
<Columns>
<asp:TemplateField HeaderText="column 1">
<ItemTemplate>
<%# Eval("MyField")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


<script type="text/javascript">
var bg;
$(function() {
$("#GridView1 tr").hover(function(event) {
bg = $(this).css("backgroundColor");
if (!$(event.target).is("th")) {
$(this).css("backgroundColor", "Yellow");
}
}, function() {
$(this).css("backgroundColor", bg);
});
});
</script>

mehdi.mousavi
یک شنبه 16 خرداد 1389, 17:42 عصر
با سلام خدمت اساتید محترم
من می خوام وقتی Mouse رو بر روی رکورد های gridView ببرم رنگ آن رکورد عوض بشه و وقتی که برم سراغ یک رکورد جدید رنگ رکورد قدیمی به حالت خودش برگرده و رنگ رکورد جدید عوض بشه در ضمن می خوام حالت AlternatingRowStyle رو هم پشتیبانی کنه
ممنون میشم اساتید محترم راهنمایی کنند

سلام.
دوست عزیز. قرار نیست ما همه مشکلات عالم رو با jQuery حل کنیم. وقتی انتخاب بهتری دارید، باید اونو انتخاب کنید. کاری که شما میخواهید انجام بدید براحتی با hover pseudo element ها در CSS میسر هستش و IE7 و بقیه Browser ها هم اونو پشتیبانی میکنن. کافیه تا برای جدولتون CssClass رو روی list تنظیم کنید. سپس میتونید با نوشتن همچین Style ای، به هدفتون برسید:


.list tr:hover td {
background-color: #f00;
}

به این ترتیب وقتی Mouse روی یک آیتم میره، رنگ Row مربوطه به رنگ مورد نظر تغییر پیدا میکنه. حتی بهتره از AlternatingRowStyle هم استفاده نکنید و در عوض، با jQuery، کلاس مورد نظر خودتون رو به Row ها (بصورت یکی در میان) assign کنید:


$('.list tr:nth-child(odd)').addClass('odd');
$('.list tr:nth-child(even)').addClass('even');

بدین ترتیب، کافیه تا در Style مربوطه، odd و even رو برای رنگ دلخواه خودتون تعریف کنید.

موفق باشید.