js+ asp.Net ajax开发163邮箱效果(列表底色、多选拖动等)--checkBox多选

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

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

None.gif function  clkAll(myTable,ck)
ExpandedBlockStart.gifContractedBlock.gif
dot.gif {
InBlock.gif    
var tb =   document.getElementById(myTable); 
InBlock.gif    
var objs1 = tb.getElementsByTagName('TR');      
ExpandedSubBlockStart.gifContractedSubBlock.gif    
for(var i=1; i<objs1.length; i++dot.gif{
InBlock.gif      
if (objs1[i].getElementsByTagName('TD').item(0).getElementsByTagName('INPUT').length>0)
InBlock.gif      objs1[i].getElementsByTagName('TD').item(
0).getElementsByTagName('INPUT').item(0).checked = ck.checked;      
ExpandedSubBlockEnd.gif    }

InBlock.gif    lastCheck
=null;
InBlock.gif    
InBlock.gif    RefreshRowStates(tb);
InBlock.gif    RefreshRowColor(tb);
ExpandedBlockEnd.gif}

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

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

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

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

InBlock.gif            
if (tag == 1)
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                obj.parentNode.childNodes[i].childNodes[
0].childNodes[0].checked = obj.childNodes[0].childNodes[0].checked;
InBlock.gif                mov(obj.parentNode.childNodes[i]); 
InBlock.gif                mou(obj.parentNode.childNodes[i]); 
ExpandedSubBlockEnd.gif            }

InBlock.gif            
if (tag ==2break;
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockEnd.gif    }

InBlock.gif    
else
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        lastCheck
=obj;        
ExpandedSubBlockEnd.gif    }
    
InBlock.gif    RefreshRowStates(obj.parentNode.parentNode);
ExpandedBlockEnd.gif}

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

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

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

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

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

ExpandedBlockEnd.gif    }

对于按住Ctrl实现多选,没有必要实现,因为不同于windows的单击单选,
gridView本来就是按住ctrl的效果了(单击增加、删除选择)

转载于:https://www.cnblogs.com/calmzeal/archive/2007/07/29/835416.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值