zoukankan      html  css  js  c++  java
  • 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();
    ------------

    注:以上参考了网络文章

  • 相关阅读:
    基础排序算法之快速排序(Quick Sort)
    基础排序算法之并归排序(Merge Sort)
    Python中With的用法
    Python中AND-OR的用法
    注解/Annotation
    初识Angular2
    Angular 2 入门二
    Angular2 入门
    asp中将系统货币符号¥改为美国货币符号$的做法
    设计模式总结
  • 原文地址:https://www.cnblogs.com/yidianfeng/p/1365945.html
Copyright © 2011-2022 走看看