关于gridview的javascript函数,怎么写

[asdf144]

下面是我的asp.net页面的代码:

<div>
        <span style=" font-size:12px; color:#9399A7;">选择：</span>
        <a id="cbxall" href="#" class="font" >全部</a>
        -<a id="cbxnone" href="#" class="font">无</a>
        </div>
<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        onselectedindexchanged="GridView1_SelectedIndexChanged" Width="100%" 
        Font-Size="12px">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" />
                    全选
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
                <ItemStyle Width="30px" />
            </asp:TemplateField>
            <asp:BoundField HeaderText="收信人" DataField="Receiver">
            <ItemStyle Width="100px" />
            </asp:BoundField>
            <asp:BoundField HeaderText="标题" DataField="Title"></asp:BoundField>
            <asp:BoundField HeaderText="时间" DataField="SaveTime">
            <ItemStyle Width="150px" />
            </asp:BoundField>
            <asp:CommandField ShowEditButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
            <asp:CommandField ShowSelectButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
            <asp:CommandField ShowDeleteButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
        </Columns>
        <HeaderStyle Font-Size="13px" HorizontalAlign="Left" />
    </asp:GridView>
</div>

这是我的gridview图片:






我想在页面上用javascript代码实现以下几个功能:

1. 当“全选”CheckBox呈选中状态时 ,所有的CheckBox都呈选中状态,并且所有的行都成“红色”;
当“全选”CheckBox不选中时，所有的CheckBox呈不选中状态，并且所有的行都成“白色”。

2. 当选中GridView中对应行的CheckBox时，该行变成“红色”，取消选中GridView中对应行的CheckBox时,该行变成“白色”

3 当点击“全部” 链接时，所有的CheckBox呈选中状态，同时所有的行都成红色.

4.当点击“无” 链接时， 所有的CheckBox都呈不选中状态，同时所有的行变成白色。

5.当鼠标移到GridView的相应行时，该行变成红色，鼠标离开时为白色(即onmouseover和onmouserout事件)



大家注意了，这几个事件都是用javascript代码在页面实现，弄不好会冲突的。
先谢谢大家能帮我解决这个问题。

[asdf144]

我想在页面上用javascript代码实现以下几个功能:

1. 当“全选”CheckBox呈选中状态时 ,所有的CheckBox都呈选中状态,并且所有的行都成“红色”;
当“全选”CheckBox不选中时，所有的CheckBox呈不选中状态，并且所有的行都成“白色”。

2. 当选中GridView中对应行的CheckBox时，该行变成“红色”，取消选中GridView中对应行的CheckBox时,该行变成“白色”

3 当点击“全部” 链接时，所有的CheckBox呈选中状态，同时所有的行都成红色.

4.当点击“无” 链接时， 所有的CheckBox都呈不选中状态，同时所有的行变成白色。

5.当鼠标移到GridView的相应行时，该行变成红色，鼠标离开时为白色(即onmouseover和onmouserout事件)


自己先顶了,上面的问题不怎么清楚,重写了下

[SK_Aqi]

貌似很多功能
楼主先把其中的一个逐个实现，然后再一起运行测试。

[bj_kevin51]

很多方面关于这些的js特效。google吧 LZ，

[qqzeng-ip]

<script language="javascript" type="text/javascript"> 

    
//先获取所有的Checkbox 

    
var chkList = document.getElementsByName("CheckBox1"); 

    
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 + ","; 

        
} 

 
    
} 

   
 

    
</script> 

[guyehanxinlei]

友情up

[qqzeng-ip]

<script language="javascript" type="text/javascript">
   function checkme(obj,rowid)
   {
     if(obj.checked)
     {
      rowid.style.backgroundColor='silver';
      }
      else
     {
      rowid.style.backgroundColor='';
     }
    }
    </script>

[asdf144]

[Quote=引用 4 楼 zengzhan 的回复:]
JScript code<script language="javascript" type="text/javascript">//先获取所有的Checkboxvar chkList= document.getElementsByName("CheckBox1");


window.onload=function()


{//为所有checkbox添加onclick事件处?-
[/Quote]
你的代码看不懂哦,好像不能实现以上功能

[xiaojing7]

  var ReflectionClick=function(){
         for(i=0;i<myform1.length;i++)
         {   
              e=myform1.elements[i];   
              if(e.type=='checkbox' ){                
                  if(e.checked==false){   
                        e.checked=true; //选中
                        e.style.color="red";//变色
                      }else{   
                        e.checked=false;   
                       e.style.color="white";//变色
                      }   
                 }   
          }
    };
//未测试

[ws_hgo]

 function CheckAll(event)
    {
      var input=document.getElementsByTagName('input');
      var All=document.getElementById('GridView1_ctl01_chkall');
      var status=All.checked;
      for(var i=0;i<input.length;i++)
      {
        if(input[i].type=="checkbox"||input[i].checked!=status)
        {
           input[i].checked=status; 
                
        }
       
      }
     
     }

<asp:GridView ID="GridView1" runat="server"
        AutoGenerateColumns="False" Width="100%" DataKeyNames="ID" CellPadding="2" 
        CellSpacing="1" BorderWidth="0px" CssClass="GridView1" 
        onrowdatabound="GridView1_RowDataBound" onrowdeleting="GridView1_RowDeleting">
      <PagerSettings PageButtonCount="50" />
      <Columns>
          <asp:BoundField DataField="ID" HeaderText="ID">
              <ItemStyle Width="30px" HorizontalAlign="Center" Height="20px" />
          </asp:BoundField>
         <asp:BoundField DataField="Title" HeaderText="标题" >
              <HeaderStyle Width="200px" />
              <ItemStyle Width="200px" />
          </asp:BoundField>
         <%-- <asp:BoundField DataField="ParentTitle" HeaderText="所属类别" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="center" />--%>
          <asp:BoundField DataField="Hits" HeaderText="点击数" ItemStyle-Width="40px" 
              ItemStyle-HorizontalAlign="center" >
     
<ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
          </asp:BoundField>
     
          <asp:TemplateField HeaderText="最新">
              <ItemStyle Width="30" HorizontalAlign="Center" />
              <ItemTemplate><%# Convert.ToBoolean(Eval("IsNew")) ? "<span class=\"cGreen\">√</span>" : "<span class=\"cRed\">×</span>"%></ItemTemplate>
          </asp:TemplateField>
    
          <asp:BoundField DataField="CreateTime" HeaderText="发布时间" HtmlEncode="False" DataFormatString="{0:yyyy-MM-dd}">
              <ItemStyle Width="80px" HorizontalAlign="Center" />
          </asp:BoundField>
         
           <asp:HyperLinkField DataNavigateUrlFields="ID,ParentID" 
              DataNavigateUrlFormatString="~/Manage/EditNewsList.aspx?id={0}&Key={1}" 
              HeaderText="编辑" Text="编辑">
              <HeaderStyle Width="15%" />
              <ItemStyle Width="15%" />
          </asp:HyperLinkField>
         
          <asp:CommandField HeaderText="删除" ShowDeleteButton="True" />
         <asp:TemplateField HeaderText="选择">
      <HeaderTemplate>
          <asp:CheckBox ID="chkall" runat="server" onclick="CheckAll(this);" onfocus="this.blur()"/>
    </HeaderTemplate>
          <HeaderStyle Width="5%" />
      <ItemStyle Width="5%" HorizontalAlign="Center" />
      <ItemTemplate>
          <asp:CheckBox ID="checkbox" runat="server" onfocus="this.blur()" />
      </ItemTemplate>
      </asp:TemplateField>
          </Columns>
      <EmptyDataTemplate><div class="NoRecord">没有找到相关信息!</div></EmptyDataTemplate>
<FooterStyle CssClass="footerStyle" />
<RowStyle CssClass="rowStyle" />
<SelectedRowStyle CssClass="selectedRowStyle" />
<PagerStyle CssClass="pagerStyle" />
<HeaderStyle CssClass="headerStyle" />
<AlternatingRowStyle CssClass="alternatingRowStyle" />
  </asp:GridView>

[ws_hgo]

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
          
            e.Row.Attributes.Add("onclick ","if(window.oldtr!=null){window.oldtr.runtimeStyle.cssText= ' ';}this.runtimeStyle.cssText= 'background-color:red ';window.oldtr=this ");
        }
  

[asdf144]

[Quote=引用 8 楼 xiaojing7 的回复:]
JScript codevar ReflectionClick=function(){for(i=0;i<myform1.length;i++)
{
e=myform1.elements[i];if(e.type=='checkbox' ){if(e.checked==false){
e.ch?-
[/Quote]
能不能把几个都写下啊,然后综合一下,
要是不产生冲突就好了,谢谢啦

[asdf144]

[Quote=引用 10 楼 ws_hgo 的回复:]
 C# codeprotectedvoid GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

e.Row.Attributes.Add("onclick","if(window.oldtr!=null){window.oldtr.runtimeStyle.cs?-
[/Quote]
能不能写几个都写下啊,综合一下,谢谢你了

[asdf144]

自己选顶一下

[Lovely_baby]

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        onselectedindexchanged="GridView1_SelectedIndexChanged" Width="100%" 
        Font-Size="12px">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                       <input type="checkbox" id="all_check" onclick="checkboxOnclick('Tlist')" />                    全选
                </HeaderTemplate>
                <ItemTemplate>
                     <input type="checkbox" value='<%# DataBinder.Eval(Container.DataItem, "ID") %>' name="IDs" />                </ItemTemplate>
                <ItemStyle Width="30px" />
            </asp:TemplateField>
            <asp:BoundField HeaderText="收信人" DataField="Receiver">
            <ItemStyle Width="100px" />
            </asp:BoundField>
            <asp:BoundField HeaderText="标题" DataField="Title"></asp:BoundField>
            <asp:BoundField HeaderText="时间" DataField="SaveTime">
            <ItemStyle Width="150px" />
            </asp:BoundField>
            <asp:CommandField ShowEditButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
            <asp:CommandField ShowSelectButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
            <asp:CommandField ShowDeleteButton="True">
            <ItemStyle Width="35px" />
            </asp:CommandField>
        </Columns>
        <HeaderStyle Font-Size="13px" HorizontalAlign="Left" />
    </asp:GridView>

       
 function Delete() {
            var toTal = 0;
            var Tab = document.getElementById("Tlist");
            if (Tab == null) return false;
            var chks = Tab.all.tags("input");
            if (chks == null) return false;
            if (chks.length) {
                for (i = 0; i < chks.length; i++) {
                    if (chks[i].type == "checkbox") {
                        if (chks[i].checked) {
                            chks[i].style.backgroundColor='silver';
                            toTal += 1;
                        }
                    }
                }
            }
            else if (chks.type == "checkbox") {
                if (chks.checked) {
                    chks.style.backgroundColor='silver';
                    toTal += 1;
                }
            }
            if (toTal == 0) {
                alert("您至少选择一个。");
                return false;
            }
            if (confirm("您确认删除所选项？")) {
                return true;
            } else {
                return false;
            }
        }

其中全选 和 全部反选可以使用下边的：

[Lovely_baby]

        //全选
        function SelAllCheck(tabID) {
            var Tab = document.all(tabID);
            if (Tab == null)
                return;
            var chks = Tab.all.tags("input");
            if (chks == null)
                return;
            if (chks.length) {
                for (i = 0; i < chks.length; i++) {
                    if (chks[i].type == "checkbox") {
                        chks[i].checked = true;
                    }
                }
            }
            else if (chks.type == "checkbox") {
                chks.checked = true;
            }
        }
        //反选
        function btnNotSelAll(TabID) {
            var Tab = document.all(TabID);
            if (Tab == null)
                return;
            var chks = Tab.all.tags("input");
            if (chks == null)
                return;
            if (chks.length) {
                for (i = 0; i < chks.length; i++) {
                    if (chks[i].type == "checkbox") {
                        chks[i].checked = !chks[i].checked;
                    }
                }
            }
            else if (chks.type == "checkbox") {
                chks.checked = !chks.checked;
            }
        }

[ws_hgo]

我的那个可以啦
你主要是checkbox的全选,反选
点击该行的checkbox变色，取消背景颜色消失

[asdf144]

[Quote=引用 16 楼 ws_hgo 的回复:]
我的那个可以啦
你主要是checkbox的全选,反选
点击该行的checkbox变色，取消背景颜色消失
[/Quote]
那onmouseover和onmouserout事件怎么没写啊,
你能综合一下吗?