سوال: رنگي كردن يك سطر در گريد بر اساس شرط خاص [بایگانی]

View Full Version : سوال: رنگي كردن يك سطر در گريد بر اساس شرط خاص

mehrnaz_ss

جمعه 11 تیر 1389, 13:27 عصر

با سلام
من يك گريد دارم كه بايد وقتي يك فيلد در ديتابيس مقدار false داشته باشه رنگ اين سطر در گريد قرمز بشه . سوال من اينه كه در چه رويدادي و چه كدي براي رنگي كردن سطر مورد نظر در گريد استفاده كنم؟

ricky22

جمعه 11 تیر 1389, 13:40 عصر

سلام با Jquery و Javascript می تونید یک سطر رو رنگی کنید.
مثل این (http://www.dotnetcurry.com/ShowArticle.aspx?ID=259)و این (http://stackoverflow.com/questions/471485/highlighting-gridview-rows-for-striped-gridview-from-checkbox)و این (http://www.dotnetcurry.com/ShowArticle.aspx?ID=250&AspxAutoDetectCookieSupport=1)

Alireza_Salehi

جمعه 11 تیر 1389, 14:43 عصر

Behrouz_Rad

جمعه 11 تیر 1389, 18:16 عصر

جدیدا javascrip و jquery شده همه کاره،
میخوام آب بخورم: jquery ،
میخوام سایت درست کنم: jquery
میخوام برم فضا: jquery
....
کاری که به سادگی با یک کد ساده css حل میشود با jquery حل نمی کنند.
-----------------------------------------

یک کلاس CSS طراحی کنید background-color آن ست شده باشه و بعد به CSSClass ردیف مربوطه منتسب کنید.
در رویداد RowDataBound شبیه این می شود:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
e.Row.CssClass = "myclass";
}
کدی که نوشتی باعث افزایش بی رویه ی حجم صفحه میشه. اگر 100 رکورد داشته باشیم و مقدار فیلد flag همه ی اونها برابر با صفر باشه آیا باید صد بار مقدار خصیصه ی class تگ tr رو برابر با myclass قرار بدیم؟!!!

پیشنهاد من اینه:
در روال RowDataBound، مقدار Property مورد نظر بررسی بشه و در صورتی که با مقدار مورد نظر برابر بود، با استفاده از متد RegisterArrayDeclaration کلاس ClientScript، اندیس سطر رو در یک آرایه قرار میدیم و سپس با jQuery، رنگ پس زمینه ی سطرهای GridView که اندیسشون در آرایه هست رو تغییر میدیم:

if (e.Row.RowType == DataControlRowType.DataRow)
{
MyClass myClass = e.Row.DataItem as MyClass;
if (myClass.MyProperty == "Value")
{
Page.ClientScript.RegisterArrayDeclaration("gridIndexes", e.Row.RowIndex.ToString());
}
}

<script type="text/javascript">
$(function() {
var gridRows = $("#GridView1 tr");
$.each(gridIndexes, function(n, v) {
gridRows.eq(v + 1).css("backgroundColor", "red");
});
});
</script>

موفق باشید

Alireza_Salehi

جمعه 11 تیر 1389, 22:49 عصر

کدی که نوشتی باعث افزایش بی رویه ی حجم صفحه میشه. اگر 100 رکورد داشته باشیم و مقدار فیلد flag همه ی اونها برابر با صفر باشه آیا باید صد بار مقدار خصیصه ی class تگ tr رو برابر با myclass قرار بدیم؟!!!

پیشنهاد من اینه:
در روال RowDataBound، مقدار Property مورد نظر بررسی بشه و در صورتی که با مقدار مورد نظر برابر بود، با استفاده از متد RegisterArrayDeclaration کلاس ClientScript، اندیس سطر رو در یک آرایه قرار میدیم و سپس با jQuery، رنگ پس زمینه ی سطرهای GridView که اندیسشون در آرایه هست رو تغییر میدیم:

if (e.Row.RowType == DataControlRowType.DataRow)
{
MyClass myClass = e.Row.DataItem as MyClass;
if (myClass.MyProperty == "Value")
{
Page.ClientScript.RegisterArrayDeclaration("gridIndexes", e.Row.RowIndex.ToString());
}
}

<script type="text/javascript">
$(function() {
var gridRows = $("#GridView1 tr");
$.each(gridIndexes, function(n, v) {
gridRows.eq(v + 1).css("backgroundColor", "red");
});
});
</script>

موفق باشید
نام رویداد و نحوه رنگی کردن را خواسته بودند...

نکته اول : فرض بر این است که ایشان خودشان می دانند باید if بگذارند و فقط رکورد مورد نظر را ست کنند. بنده عادت ندارم بدیهیات را در هنگام پاسخ دادن تکرار کنم.

نکته دوم : خوب شما بعدا اومدی با jQuery همچین چیزی رو به سطرهات اضافه کردی:
style="background-color:Red"
این که شما نوشتی کم حجم تره یا این:
class="r"

حتما برای hover شدنش هم کلی لقمه رو می خواهید بپیچونید دور سر این بنده خدا، در حالی که تنها با ست کردن کلاس تمام نیاز های ایشان برطرف می شود.
حالا اگر خواست کادرش مشکی کنه حتما یه border: 1px solid black; هم میخواهید به استایل اضافه کنید؟

به نظرم جو jQuery داره مشکل ساز میشه...
کد شما اصلا بهینه نیست، به کرات برای بهینه سازی صفحات سنگین در نرم افزارهای اتوماسیون تحت وب درگیر چنین موضوعی بوده ام.قطعا روش شما را رد می کنم.

عکسی که در زیر ضمیمه کرده ام روش شما و بنده در کنار هم را نشان می دهد (البته من عادت ندارم در صفحات سنگین نام کلاس های CSS را بیش از 3 کاراکتر انتخاب کنم) روش شما در صفحات با تعداد رکورد زیاد قعا باعث عذاب کاربر می شود.

Behrouz_Rad

جمعه 11 تیر 1389, 22:55 عصر

Alireza_Salehi@
برادر من، قصد ما کل کل نیست. چرا ناراحت میشی. با منطق و دلیل پیش میریم :)

نکته اول : فرض بر این است که ایشان خودشان می دانند باید if بگذارند و فقط رکورد مورد نظر را ست کنند. بنده عادت ندارم بدیهیات را در هنگام پاسخ دادن تکرار کنم.

بنده مثال رو کامل گذاشتم تا دوستمون بدونن الگوریتمی که در ذهن بنده هست به چه شکل پیاده میشه. حقیقتاً متوجه نشدم این صحبت شما چه ارتباطی با موضوع داشت.

نکته دوم : خوب شما بعدا اومدی با jQuery همچین چیزی رو به سطرهات اضافه کردی:
style="background-color:Red"
این که شما نوشتی کم حجم تره یا این:
class="r"

برادر این کد بعد از بارگزاری صفحه اجرا میشه. در نتیجه حجمی رو به صفحه اضافه نمی کنه چون داریم با DOM در حالت on the fly کار می کنیم :)

حالا اگر خواست کادرش مشکی کنه حتما یه border: 1px solid black; هم میخواهید به استایل اضافه کنید؟

بله مشکلی وجود نداره. اما بهتر هست که از addClass استفاده بشه.

عکسی که در زیر ضمیمه کرده ام روش شما و بنده در کنار هم را نشان می دهد (البته من عادت ندارم در صفحات سنگین نام کلاس های CSS را بیش از 3 کاراکتر انتخاب کنم) روش شما در صفحات با تعداد رکورد زیاد قعا باعث عذاب کاربر می شود.

اشتباه شما در برداشت اشتباهت از jQuery و نحوه ی کار با DOM هست. توضیح دادم که ما "بعد از بارگزاری صفحه" داریم با اون کار می کنیم.

کد شما اصلا بهینه نیست، به کرات برای بهینه سازی صفحات سنگین در نرم افزارهای اتوماسیون تحت وب درگیر چنین موضوعی بوده ام.قطعا روش شما را رد می کنم.

بنده به شخصه بسیار خورسندم که افراد با سوادی همانند شما در این سایت هستند و ما از محضرشون فیض میبریم :)

موفق باشید.

Alireza_Salehi

شنبه 12 تیر 1389, 00:07 صبح

Behrouz_Rad

شنبه 12 تیر 1389, 00:14 صبح

قصد کل کل نداشتم.از لحن نوشته ام ظاهرا بد برداشت کردی برادر:)

بنده هم مدعی نیستم، ولی همین الان روش شما رو با این که قبلا شبیهش رو تست کرده بودم مجدد رو یک صفحه سنگین (صفحه ای که با کمک امکانات پیشفرض دات نت حجمی معادل 3 مگابایت داشت و بعد از بهینه سازی به 800 کیلو رسیده بود) تست کردم ، تاثیر خاصی نداشت. فقط در لود اولیه کمی حجم صفحه کم می شود. این کاهش حجم را، حجم jQuery جبران می کند!
در کل تغییر خاصی در پاسخگوئی صفحه مذکور حاصل نشد، فقط کمی اسکریپت اضافه شد و کدهایی جهت اجرای اسکریپت فوق در endrequest آجاکس به صفحه اضافه گردید. ضمن این که در اینترنت اکسپلورر کمی حالت هنگ به خاطر اجرای اسکریپت بوجود آمد.
نیاز نیست که شرایط خاصی رو به وجود بیاری. ما داریم در مورد یک مطلب کاملاً روشن و واضح صحبت می کنیم: اختصاص Class Selector به هر ردیف اشتباه است.
راه حل پیشنهادی بنده رو هم که دیدی.
پس در اینکه حجم صفحه کاهش پیدا می کنه که شکی نیست. در مورد حجم jQuery نیاز به گفتن نیست که از CDN استفاده می کنیم و اونها از gzip و Cache بهره می برند. پس فقط یک بار load اولیه داریم.

در ضمن، یادته در یک تاپیک گفته بودی که همین یک کیلوبایت هاست که کم کم جمع میشه و حجم صفحه رو زیاد می کنه؟ :چشمک:

موفق باشید.

Alireza_Salehi

شنبه 12 تیر 1389, 00:18 صبح

شرایط خاصی در کار نبود ، دو روش در یک سناریوی مشابه تست شد، تغییر خاصی در شرایط کلی صفحه حاصل نگردید....

ولی این رو متوجه نشدم:
اختصاص Class Selector به هر ردیف اشتباه است.

Behrouz_Rad

شنبه 12 تیر 1389, 00:21 صبح

شرایط خاصی در کار نبود ، دو روش در یک سناریوی مشابه تست شد، تغییر خاصی در شرایط کلی صفحه حاصل نگردید....

ولی این رو متوجه نشدم:
اختصاص Class Selector به هر ردیف اشتباه است.
متاسفانه واضح تر از این نمی تونم توضیح بدم.
شاید فرد دیگه ای این توانایی رو داشته باشه.

موفق باشید.

mehdi.mousavi

شنبه 12 تیر 1389, 14:22 عصر

بنده هم مدعی نیستم، ولی همین الان روش شما رو با این که قبلا شبیهش رو تست کرده بودم مجدد رو یک صفحه سنگین (صفحه ای که با کمک امکانات پیشفرض دات نت حجمی معادل 3 مگابایت داشت و بعد از بهینه سازی به 800 کیلو رسیده بود) تست کردم ، تاثیر خاصی نداشت. فقط در لود اولیه کمی حجم صفحه کم می شود. این کاهش حجم را، حجم jQuery جبران می کند!
در کل تغییر خاصی در پاسخگوئی صفحه مذکور حاصل نشد، فقط کمی اسکریپت اضافه شد و کدهایی جهت اجرای اسکریپت فوق در endrequest آجاکس به صفحه اضافه گردید. ضمن این که در اینترنت اکسپلورر کمی حالت هنگ به خاطر اجرای اسکریپت بوجود آمد.

سلام.
ببینید. اینکه همه جا شده JavaScript و jQuery بدلیل نقص ASP.NET یا دیگر تکنولوژیهای Server-Side یا عدم توانایی متخصصین در بهره گیری از توانایی های این تکنولوژیها نیست. jQuery انقلابی در سطح وب محسوب میشه و نمیشه همینطوری در موردش اظهار نظر کرد. درسته که در استفاده بی رویه از کدهای Client-Side باید هوشیار باشیم، اما قرار هم نیست به صرف همه گیر شدن jQuery ازش دوری کنیم و ...

اجازه بدید به اصل مساله برگردیم. شما ادعا میکنید صفحه ای 3MB ای رو به 800KB رسونده اید. اولین سوالی که به ذهن بنده میاد اینجا اینه که "چرا صفحه شما حجمش اینقدر بالاست؟ مگه چه جور اطلاعاتی در صفحه نشون داده میشه؟ 800KB بابت چی؟" بعدش ادعا کرده اید که اعمال روشی که آقای راد بهش اشاره کردن، باعث تغییر چشمگیری در سایز صفحه نشده و ...
چطور این ادعا رو میکنید؟

صفحه ای رو در نظر بگیرید که حجمش 800KB هستش و حاوی یه جدول هستش با 800 ردیف (یعنی اغراق آمیز هر ردیف 1KB داده داره). حالا فرض کنید میخواهیم یکی در میون ردیفها رو رنگی کنیم، striped zebra منظورمه... اگر CssClass مربوطه رو سمت سرور Set کنیم، اونوقت باید با استفاده از AlternatingRowStyle کلاس مربوطه رو Set کنیم. من شرایط رو ساده تر فرض میکنم و نمیخوام پیچیده اش کنم... به این ترتیب، از سمت ASP.NET یه جدولی ساخته میشه که 400 تا از Row هاش اینو دارن:

class="row"

یعنی میشه 11 ضربدر 400 بایت که تقریبا میشه 4.3KB...

حالا فرض کنید ما این کارو با این کد انجام بدیم:

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

به بیان دیگه، همینکارو، در 50 بایت انجام میدم (چون فقط این 50 بایت هستش که از سمت سرور به Client میره، و از اون به بعد ردیفها یکی در میون، حاوی کلاس row میشن که این مساله با اجرای کد 50 بایتی فوق میسر میشه) و حجم صفحه ام رو 4350 بایت کاهش میدم که با توجه به سایز خود jQuery (که به صفحه افزوده میشه)، در نهایت باعث میشم صفحه ام از 800KB به 800+24-4.3 برسه یعنی 820KB حدودا...

اما چی عایدم میشه؟ فرض کنید 800 ردیف، بشه 8000 ردیف. یعنی 42KB فقط میشه class="row" ها... در صورتیکه اون 50 بایت فوق دست نخورده باقی میمونه. حالا فرض کنید همین ردیفهایی که class اشون row هست، باید هنگام Click شدن کاری انجام بدن. بطور مثال باعث باز شدن یک Popup Window بشن. وقتی کد JavaScript مربوطه رو بنویسید، متوجه میشید که بشکل عجیب و غریبی سایز صفحه و پیچیدگی کدهاتون (سمت Client) افزایش پیدا میکنه و اونوقت می پذیرید که 24KB به صفحات خودتون بیفزایید (تازه اونهم فقط بار اول میاد و از اون به بعد از Cache مرورگر استفاده خواهد شد) تا از مزایای بی شماری که براتون داره استفاده کنید.

استفاده از jQuery اگر صحیح و بجا باشه، باعث افزایش توان سرور نیز خواهد شد.
موفق باشید.

Alireza_Salehi

شنبه 12 تیر 1389, 15:52 عصر

سلام.
ببینید. اینکه همه جا شده JavaScript و jQuery بدلیل نقص ASP.NET یا دیگر تکنولوژیهای Server-Side یا عدم توانایی متخصصین در بهره گیری از توانایی های این تکنولوژیها نیست. jQuery انقلابی در سطح وب محسوب میشه و نمیشه همینطوری در موردش اظهار نظر کرد. درسته که در استفاده بی رویه از کدهای Client-Side باید هوشیار باشیم، اما قرار هم نیست به صرف همه گیر شدن jQuery ازش دوری کنیم و ...

اجازه بدید به اصل مساله برگردیم. شما ادعا میکنید صفحه ای 3MB ای رو به 800KB رسونده اید. اولین سوالی که به ذهن بنده میاد اینجا اینه که "چرا صفحه شما حجمش اینقدر بالاست؟ مگه چه جور اطلاعاتی در صفحه نشون داده میشه؟ 800KB بابت چی؟" بعدش ادعا کرده اید که اعمال روشی که آقای راد بهش اشاره کردن، باعث تغییر چشمگیری در سایز صفحه نشده و ...
چطور این ادعا رو میکنید؟

صفحه ای رو در نظر بگیرید که حجمش 800KB هستش و حاوی یه جدول هستش با 800 ردیف (یعنی اغراق آمیز هر ردیف 1KB داده داره). حالا فرض کنید میخواهیم یکی در میون ردیفها رو رنگی کنیم، striped zebra منظورمه... اگر CssClass مربوطه رو سمت سرور Set کنیم، اونوقت باید با استفاده از AlternatingRowStyle کلاس مربوطه رو Set کنیم. من شرایط رو ساده تر فرض میکنم و نمیخوام پیچیده اش کنم... به این ترتیب، از سمت ASP.NET یه جدولی ساخته میشه که 400 تا از Row هاش اینو دارن:

class="row"

یعنی میشه 11 ضربدر 400 بایت که تقریبا میشه 4.3KB...

حالا فرض کنید ما این کارو با این کد انجام بدیم:

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

به بیان دیگه، همینکارو، در 50 بایت انجام میدم (چون فقط این 50 بایت هستش که از سمت سرور به Client میره، و از اون به بعد ردیفها یکی در میون، حاوی کلاس row میشن که این مساله با اجرای کد 50 بایتی فوق میسر میشه) و حجم صفحه ام رو 4350 بایت کاهش میدم که با توجه به سایز خود jQuery (که به صفحه افزوده میشه)، در نهایت باعث میشم صفحه ام از 800KB به 800+24-4.3 برسه یعنی 820KB حدودا...

اما چی عایدم میشه؟ فرض کنید 800 ردیف، بشه 8000 ردیف. یعنی 42KB فقط میشه class="row" ها... در صورتیکه اون 50 بایت فوق دست نخورده باقی میمونه. حالا فرض کنید همین ردیفهایی که class اشون row هست، باید هنگام Click شدن کاری انجام بدن. بطور مثال باعث باز شدن یک Popup Window بشن. وقتی کد JavaScript مربوطه رو بنویسید، متوجه میشید که بشکل عجیب و غریبی سایز صفحه و پیچیدگی کدهاتون (سمت Client) افزایش پیدا میکنه و اونوقت می پذیرید که 24KB به صفحات خودتون بیفزایید (تازه اونهم فقط بار اول میاد و از اون به بعد از Cache مرورگر استفاده خواهد شد) تا از مزایای بی شماری که براتون داره استفاده کنید.

استفاده از jQuery اگر صحیح و بجا باشه، باعث افزایش توان سرور نیز خواهد شد.
موفق باشید.
1. در مورد این که انقلاب کرده و این حرفها موافقم، ولی نه دیگه واسه هر کاری...

2. در مورد این که اون صفحه چرا اینقدر حجمش زیاد بوده : به خاطر این که از گریدویو استفاده کرده بوده و از روش استایل دادن کنترل های ASP.NET که بی خود و بی جهت استایل تولید می کنند.
تعداد زیادی کنترل سرور ساید در هر ردیف بوده که به روش تولید id در asp.net 3.5 به قبل کلی کد اضافه به هر سطر اضافه شده بوده. ضرب کنید در آی دیupdateopanel و multiview و loginview مورد نظر...
که با تبدیل gridview به repeater و اصلاح id ها حجم صفحه 60 در صد کم شد.

3. در مرورگری مثل IE مخصوصا از نوع 6 ترجیح میدم کمتر از اسکریپت استفاده کنم چون اصلا با اسکریپت خوب برخورد نمیکنه.
ولی در فایرفاکس، اپرا و کروم قعا روش jquery بهتره.
اما چون بیشتر ملت ما از IE استفاده می کنند فعلا مجبوریم اصل کار رو روی IE تنظیم کنیم.

در ضمن اصل حرفهای شما و برادر بهروز رو قبول دارم ، ولی در مواردی همون روش اول رو ترجیم میدم.

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

محمدجواد67

پنج شنبه 03 مرداد 1392, 20:26 عصر

سلام.
ببینید. اینکه همه جا شده JavaScript و jQuery بدلیل نقص ASP.NET یا دیگر تکنولوژیهای Server-Side یا عدم توانایی متخصصین در بهره گیری از توانایی های این تکنولوژیها نیست. jQuery انقلابی در سطح وب محسوب میشه و نمیشه همینطوری در موردش اظهار نظر کرد. درسته که در استفاده بی رویه از کدهای Client-Side باید هوشیار باشیم، اما قرار هم نیست به صرف همه گیر شدن jQuery ازش دوری کنیم و ...

اجازه بدید به اصل مساله برگردیم. شما ادعا میکنید صفحه ای 3MB ای رو به 800KB رسونده اید. اولین سوالی که به ذهن بنده میاد اینجا اینه که "چرا صفحه شما حجمش اینقدر بالاست؟ مگه چه جور اطلاعاتی در صفحه نشون داده میشه؟ 800KB بابت چی؟" بعدش ادعا کرده اید که اعمال روشی که آقای راد بهش اشاره کردن، باعث تغییر چشمگیری در سایز صفحه نشده و ...
چطور این ادعا رو میکنید؟

صفحه ای رو در نظر بگیرید که حجمش 800KB هستش و حاوی یه جدول هستش با 800 ردیف (یعنی اغراق آمیز هر ردیف 1KB داده داره). حالا فرض کنید میخواهیم یکی در میون ردیفها رو رنگی کنیم، striped zebra منظورمه... اگر CssClass مربوطه رو سمت سرور Set کنیم، اونوقت باید با استفاده از AlternatingRowStyle کلاس مربوطه رو Set کنیم. من شرایط رو ساده تر فرض میکنم و نمیخوام پیچیده اش کنم... به این ترتیب، از سمت ASP.NET یه جدولی ساخته میشه که 400 تا از Row هاش اینو دارن:

class="row"

یعنی میشه 11 ضربدر 400 بایت که تقریبا میشه 4.3KB...

حالا فرض کنید ما این کارو با این کد انجام بدیم:

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

به بیان دیگه، همینکارو، در 50 بایت انجام میدم (چون فقط این 50 بایت هستش که از سمت سرور به Client میره، و از اون به بعد ردیفها یکی در میون، حاوی کلاس row میشن که این مساله با اجرای کد 50 بایتی فوق میسر میشه) و حجم صفحه ام رو 4350 بایت کاهش میدم که با توجه به سایز خود jQuery (که به صفحه افزوده میشه)، در نهایت باعث میشم صفحه ام از 800KB به 800+24-4.3 برسه یعنی 820KB حدودا...

اما چی عایدم میشه؟ فرض کنید 800 ردیف، بشه 8000 ردیف. یعنی 42KB فقط میشه class="row" ها... در صورتیکه اون 50 بایت فوق دست نخورده باقی میمونه. حالا فرض کنید همین ردیفهایی که class اشون row هست، باید هنگام Click شدن کاری انجام بدن. بطور مثال باعث باز شدن یک Popup Window بشن. وقتی کد JavaScript مربوطه رو بنویسید، متوجه میشید که بشکل عجیب و غریبی سایز صفحه و پیچیدگی کدهاتون (سمت Client) افزایش پیدا میکنه و اونوقت می پذیرید که 24KB به صفحات خودتون بیفزایید (تازه اونهم فقط بار اول میاد و از اون به بعد از Cache مرورگر استفاده خواهد شد) تا از مزایای بی شماری که براتون داره استفاده کنید.

استفاده از jQuery اگر صحیح و بجا باشه، باعث افزایش توان سرور نیز خواهد شد.
موفق باشید.
:متعجب: خیلی ممنون از این همه حوصله .