GridView与javascript、checkbox

a.aspx      

      <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <input name="chk" type="checkbox" value="<%#Eval("ID")%>" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="ID" HeaderText="ID" />
                    <asp:BoundField DataField="Title" HeaderText="Title" />
                </Columns>
            </asp:GridView>
            <p>
                已选择的项:<input type="text" size="60" id="checked" /></p>
            <p>
                要选择的项:<input type="text" size="60" id="checking" /><input type="button" value="选择"
                    onclick="CheckT()" />

           </p>

<script type="text/javascript"> 
  
    //先获取到所有的checkbox再说
    var chkList=document.getElementsByName("chk");

   //页面完全载入后,在window对象上触发的onload事件,可以在body上分配
    window.onload=function()
    {
         //为所有checkbox添加onclick事件处理,以自动更新“已选择的项”
         for(var i=0;i<chkList.length;i++)
         {
            chkList[i].onclick=chkClick;
         }
    };
    //checkbox的onclick事件,用于更新“已选择的项"
    function chkClick()
    {
        var checkedList="";
        //获取所有被选中的项
        for(var i=0;i<chkList.length;i++)
        {
            if(chkList[i].checked)
                checkedList+=chkList[i].value+",";
        }
        //把选中项的列表显示到“已选择的项”中,substring在这里是为了去除最后一个逗号
        document.getElementById("checked").value=checkedList.substring(0,checkedList.length-1);
    };
     //根据在“要选择的项”中的输入选中相应的项
     function CheckT()
     {
        var checkingList=document.getElementById("checking").value;
        //没有输入就直接返回
        if(checkingList.length==0)
        {return;}
        //获取所有想要选择项的ID
        var checkingIds=checkingList.split(",");
        for(var j=0;j<chkList.length;j++)
        {
            for(var i=0;i<checkingIds.length;i++)
            {
                if(checkingIds[i]==chkList[j].value)
                {
                    chkList[j].checked=true;
                    break;
                }
                else
                {
                    chkList[j].checked=false;
                }
            }
        }
     };
    </script>

a.aspx.cs

 //生成DataTable并添加相应的列 
 DataTable dt = new DataTable();
 dt.Columns.Add("ID");          
 dt.Columns.Add("Title");    
 //测试数据填充     
 dt.Rows.Add(1, "1111");
 dt.Rows.Add(2, "2222");
 dt.Rows.Add(3, "3333");
 dt.Rows.Add(4, "4444");
 //将DataTable绑定到GridView    
 GridView1.DataSource = dt;  
 GridView1.DataBind();
------------

注:以上参考了网络文章

posted on 2008-12-31 11:24  张林春  阅读(636)  评论(1编辑  收藏  举报