استفاده از جاوا اسکریپت در کنترل GridView در ASP.NET
باسلام در این مقاله، توضیح می دهیم چگونه می توان از جاوا اسکریپت در کنترل GridView ASP.Net استفاده کرد و آن را زیبا تر کرد.
توابعی مانند:
1 برجسته کردن ردیف انتخاب شده
2 انتخاب / لغو انتخاب همه رکوردها با استفاده از یک check box.
3 برجسته کردن ردیف با قرار دادن موس روی آن .
به این ترتیب سه توابع فوق را می توان به راحتی با استفاده از جاوا اسکریپت تعریف و اجرا نمود
مفهوم پایه
مفهوم اساسی این است که GridView در دستگاه کاربر به عنوان یک جدول ساده HTML ارائه می شود. از این رو، کد جاوا اسکریپت یک جدول HTML را نمایش می دهد و نه کنترل ASP.Net GridView.
از اینرو یک بار به راحتی می توانید اسکریپت هایی را برای GridView، DataGrid و دیگر کنترل ها بنویسید تا بدانید که چگونه آنها رندر شده اند.
برای شروع یک کنترل GridView با چک باکس هدر و کادر برای هر رکورد دارید
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass = "header"
AutoGenerateColumns = "false" Font-Names = "Arial"
OnRowDataBound = "RowDataBound"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="City"
HeaderText="City" />
<asp:BoundField ItemStyle-Width="150px" DataField="Country"
HeaderText="Country"/>
<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText= "PostalCode"/>
</Columns>
</asp:GridView>
در بالا متوجه خواهید شد که دو توابع JavaScript را checkAll و Check_Click فراخوانی می کنید . همچنین یک رویداد RowDataBound را به GridView اضافه کردیم تا رویداد mouseover را اضافه کنیم
کادر انتخاب را انتخاب کنید
<script type = "text/javascript">
function Check_Click(objRef)
{
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if(objRef.checked)
{
//If checked change color to Aqua
row.style.backgroundColor = "aqua";
}
else
{
//If not checked change back to original color
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if(inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
{
if(!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
</script>
تابع فوق وقتی فراخوانی می شود که علامت جعبه در ردیف GridView را علامت بزنید یا علامت آن را علامت بزنید
قسمت اول تابع، اگر علامت جعبه چک شده باشد ردیف را نشان می دهد، اگر علامت کادر را علامت نزنید , ردیف را به رنگ اصلی تغییر می دهد، .
قسمت دوم، از طریق همه کادرهای جعبه، حل می شود تا مشخص شود آیا حداقل یک علامت چک شده است یا خیر.
اگر حداقل یکی از گزینه های انتخاب شده را علامت نزنید، علامت کادر Check Header را کنار بگذارید و آن را بررسی کنید
همه کارکردهای تأیید را بررسی کنید
<script type = "text/javascript">
function checkAll(objRef)
{
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if(inputList[i].type == "checkbox" && objRef != inputList[i])
{
if (objRef.checked)
{
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "aqua";
inputList[i].checked=true;
}
else
{
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
inputList[i].checked=false;
}
}
}
}
</script>
تابع فوق زمانی که شما با کلیک بر روی Header check all checkbox را اجرا می کنید و کادر انتخاب Header را انتخاب می کنید، تمام سطرها را برجسته می کند و کادرهای انتخاب شده را در تمام ردیف ها بررسی می کند.
و هنگامی که آن را علامت نزنید، رنگ اصلی ردیف را دوباره بازیابی می کند و کادرهای انتخاب را حذف می کند.
توجه داشته باشید:
چک کردن همه چک باکس فقط صفحه فعلی GridView را بررسی می کند و نه همه.
ردیف GridView را در رویداد موسover برجسته کنید
<script type = "text/javascript">
function MouseEvents(objRef, evt)
{
var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover")
{
objRef.style.backgroundColor = "orange";
}
else
{
if (checkbox.checked)
{
objRef.style.backgroundColor = "aqua";
}
else if(evt.type == "mouseout")
{
if(objRef.rowIndex % 2 == 0)
{
//Alternating Row Color
objRef.style.backgroundColor = "#C2D69B";
}
else
{
objRef.style.backgroundColor = "white";
}
}
}
}
</script>
عملکرد جاوا اسکریپت فوق مرجع ردیف GridView و رویداد است که باعث آن شده است.
سپس بر اساس نوع رویداد اگر رویداد mouseover باشد، با تغییر رنگ آن به رنگ نارنجی و اگر سطر mouseous باشد، رنگ ردیف را قبل از وقوع رویداد تغییر می دهد.
تابع فوق در رویدادهای ماوس و ماوس در ردیف GridView نامیده می شود. این وقایع به GridView ردیف در رویدادهای RowDataBound متصل به کد زیر است
C #
protected void RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow )
{
e.Row.Attributes.Add("onmouseover","MouseEvents(this, event)");
e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)");
}
}
VB.Net
Protected Sub RowDataBound(ByVal sender As Object,
ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event)")
e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)")
End If
End Sub
توابع جاوا اسکریپت فوق در مرورگرهای زیر تست شده اند
1 اینترنت اکسپلورر 7
2 موزیلا فایرفاکس 3
3 گوگل کروم