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.

转载于:https://www.cnblogs.com/ajaxworld/archive/2007/07/08/810569.html