zoukankan      html  css  js  c++  java
  • js+ asp.Net ajax开发163邮箱效果(列表底色、多选拖动等)checkBox多选

    163邮件一个比较爽的功能就是
    可以通过多选邮件,拖动到左侧的文件夹列表,实现邮件归类的功能
    关于我对拖动分配的实现将在后文写出
    这里说说在CheckBox的选择中做得尝试和实现的效果、方法

    1。点击表格Title实现全选每行
    这个早有人做了,我这里借鉴一下 一块贴出来方便大家看
    js事件:

    function clkAll(myTable,ck)
    {
        
    var tb =   document.getElementById(myTable); 
        
    var objs1 = tb.getElementsByTagName('TR');      
        
    for(var i=1; i<objs1.length; i++{
          
    if (objs1[i].getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').length>0)
          objs1[i].getElementsByTagName('TD').item(
    0).getElementsByTagName('INPUT').item(0).checked = ck.checked;      
        }

        lastCheck
    =null;
        
        RefreshRowStates(tb);
        RefreshRowColor(tb);
    }

    后台GridView调用js:
    <asp:TemplateField>
                                            
    <HeaderTemplate>
                                                
    <input id="Checkbox2" type="checkbox" onclick="clkAll('grvProjList',this)" runat="server" />
                                      
    </HeaderTemplate>
                                            
    <ItemTemplate>
                                                
    <asp:CheckBox ID="chbox" runat="server" />
                                            
    </ItemTemplate>

    2。点击GridView每行,实现选中当前行,按住shift实现多选
    在JS里,事件有个Bubble过程,大致就是元素的事件(click等)
    会先触发当前元素的事件,然后触发上级元素事件
    <body onclick="alert('1')">
    <input onclick="alert('2')">
    </body>
    点击文本框将依次提示 2 ,1

    因此,点击GridView每行,实现选中当前行,只要考虑对TR元素进行onclick事件处理即可
    完整的js代码如下:
    function clk(obj,event) 
    {
        
    var el = event.target?event.target:event.srcElement;
             
        
    if (el.type != "checkbox" && el.tagName != "A")
        
    {             
        obj.getElementsByTagName('TD').item(
    0).getElementsByTagName('INPUT').item(0).checked = ! obj.getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').item(0).checked
        }

        
        mov(obj);          
        
        
    if (event.shiftKey && lastCheck!=null)
        
    {        
            
    var tag = 0;
            lastCheck.childNodes[
    0].childNodes[0].checked = obj.childNodes[0].childNodes[0].checked;
            mov(lastCheck);
            mou(lastCheck);
            
    for(var i=1; i<obj.parentNode.childNodes.length; i++{
                
    if (obj.parentNode.childNodes[i] == obj || obj.parentNode.childNodes[i] == lastCheck)
                
    {
                    tag 
    ++;
                    
    continue;
                }

                
    if (tag == 1)
                
    {
                    obj.parentNode.childNodes[i].childNodes[
    0].childNodes[0].checked = obj.childNodes[0].childNodes[0].checked;
                    mov(obj.parentNode.childNodes[i]); 
                    mou(obj.parentNode.childNodes[i]); 
                }

                
    if (tag ==2break;
            }

        }

        
    else
        
    {
            lastCheck
    =obj;        
        }
        
        RefreshRowStates(obj.parentNode.parentNode);
    }

    上面的代码有两个if
    第一个判断触发事件的元素是不是checkBox或者链接元素
    前者是因为本身就是选中事件,后者是因为链接应该是进行其他操作而不是选择当前行

    第二个链接是用来实现对按住shift进行多选的实现
    毕竟一个个点太麻烦了
    163邮箱的shift多选逻辑我没看大明白
    于是按照windows的shift多选大致做的:
    记住按shift之前的点击行,按住shift点击新行后,两者之间的所有行按照最后点击新行的新状态copy
    其中的mov和mou是前文提到的刷新选中颜色的函数
    RefreshRowState先不用管
    是后面用来统计选中状态的 就是“您选择了**条数据”

    后台的代码变成了
        protected void grvProjList_RowDataBound(object sender, GridViewRowEventArgs e)
        
    {
            
    if (e.Row.RowType == DataControlRowType.DataRow)
            
    {           
                
    if ((e.Row.RowIndex % 2== 0)
                
    {
                    e.Row.Attributes.Add(
    "originalcolor", System.Drawing.ColorTranslator.ToHtml(grvProjList.RowStyle.BackColor));
                    e.Row.Attributes.Add(
    "onmouseout""mou(this,'" + System.Drawing.ColorTranslator.ToHtml(grvProjList.RowStyle.BackColor) + "')");
                }

                
    else
                
    {
                    e.Row.Attributes.Add(
    "originalcolor", System.Drawing.ColorTranslator.ToHtml(grvProjList.AlternatingRowStyle.BackColor));
                    e.Row.Attributes.Add(
    "onmouseout""mou(this,'" + System.Drawing.ColorTranslator.ToHtml(grvProjList.AlternatingRowStyle.BackColor) + "')");
                }


                e.Row.Attributes.Add(
    "onmouseover""mov(this)");            

                    e.Row.Attributes.Add(
    "onclick""clk(this,event)");
               
                e.Row.Attributes[
    "style"= "Cursor:hand";
            }

        }

    对于按住Ctrl实现多选,没有必要实现,因为不同于windows的单击单选,
    gridView本来就是按住ctrl的效果了(单击增加、删除选择)
  • 相关阅读:
    python 去除字符串两端字符串
    python 找到列表中满足某些条件的元素
    python join函数
    Ambiguous mapping. Cannot map "***Controller" been method解决办法
    uflo2安装与配置
    uflo2概述
    Mybatis-plus中的常用注解
    Spring Cloud Eureka配置文件详解 (还没细看)
    idea安装lombok
    PowerDesigner最基础的使用方法入门学习(一)
  • 原文地址:https://www.cnblogs.com/calmzeal/p/835416.html
Copyright © 2011-2022 走看看