CheckBox实现GridView的编辑
Sometime back I wrote a post about how to convert the whole GridView control into the edit mode with a single button click. You can check out the post here. One gentleman posted that how he can edit only the selected rows. This selection is based on selecting the Checkboxes which resides inside the GridView control.
First, lets see the GridView code:
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="editMode(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:TextBox ID="txtCategoryName" BorderWidth="0px" CssClass="textbox" runat="server"
Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now, let's check out the JavaScript code which is used to enable and disable the Textboxes inside the row.
<script language="javascript" type="text/javascript">
disableGridViewTextBoxes();
// make all the input elements hidden
function disableGridViewTextBoxes()
{
var gvControl = document.getElementById("gvCategories");
var inputElements = gvControl.getElementsByTagName("INPUT");
for(i=0;i<inputElements.length;i++)
{
if(isTextBox(inputElements[i]))
{
inputElements[i].disabled = true;
}
}
}
function isTextBox(obj)
{
return obj.type == 'text';
}
function editMode(obj)
{
var rowObject = obj.parentElement.parentElement;
var inputElements = getElementsByTagName(rowObject,"INPUT");
if(obj.checked)
{
showElements(inputElements,"INPUT","text");
}
else
{
hideElements(inputElements,"text");
}
}
function showElements(list, tagName,type)
{
for(i=0;i<list.length;i++)
{
if(isTypeOf(list[i],"text"))
{
list[i].disabled = false;
list[i].focus();
list[i].select();
}
}
}
function isTypeOf(obj,type)
{
return obj.type == type;
}
function hideElements(list, type)
{
for(i=0; i<list.length;i++)
{
if(isTypeOf(list[i],type))
{
list[i].disabled = true;
}
}
}
function getElementsByTagName(obj,tagName)
{
return obj.getElementsByTagName(tagName);
}
</script>
源代码打包下载
Take a look at the effect in the following animation.