본문 바로가기
Web Program/Asp.net Lecture

GridView 에 전체선택 checkbox 를 넣자.

by 현이빈이 2009. 9. 24.
반응형


GridView 로 리스트를 구성하면 전체선택 Checkbox 구성이 까다롭다..

기본 제공된 걸로 사용할 수 없다..
구글을 통해 체크박스를 헤더에 생성해주는 GridView Class 를 보기도 했는데..
약간의 문제점이 있다.

약간의 팁으로 이를 구성할 수 있다.

<script language="javascript" type="text/javascript"> 
function IsMatch(id)
{
    var regularExpresssion = new RegExp('GridView1');
   
    if(id.match(regularExpresssion)) return true;
    else return false;
}

function IsCheckBox(chk)
{
    if(chk.type == 'checkbox') return true;
    else return false;
}

function Check(parentChk)
{
    var elements =  document.getElementsByTagName("INPUT");
   
    for(i=0; i<elements.length;i++)
    {
        if(parentChk.checked == true)
        { 
            if( IsCheckBox(elements[i]) && IsMatch(elements[i].id))
            {
            elements[i].checked = true;
            }        
        }
        else
        {
          if( IsCheckBox(elements[i]) && IsMatch(elements[i].id))
          {
            elements[i].checked = false; 
          }
        }      
    }
   
}
</script>


<asp:GridView id="GridView1" runat="server" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="False" AllowPaging="True" GridLines="Vertical"
      CellPadding="2" CellSpacing="1" CssClass="table_boxline" Width="100%" AllowSorting="true"
      OnRowCreated="GridView1_RowCreated" PageSize="40" OnDataBound="GridView1_DataBound" OnPreRender="GridView1_PreRender" BorderStyle="None" BorderWidth="0px" OnRowEditing="GridView1_RowEditing">
          <RowStyle CssClass="table_cell_gray1" ></RowStyle>
          <Columns>
            <asp:TemplateField >
              <HeaderTemplate>
                <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this)" />
              </HeaderTemplate>             
              <ItemTemplate>
              <asp:CheckBox ID="chkSelect" runat="server" />           
              </ItemTemplate>
            </asp:TemplateField>




와 같이 하면.. 전체 선택이 구현된다..
너무 편하다~~

반응형