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

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

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

None.giffunction 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.giffunction 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/436378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转】医学图像中的窗宽、窗位!!

在CT等医学影像显示领域&#xff0c;我们经常会听到窗宽&#xff08;Window Width,简写WW&#xff09;、窗位&#xff08;Window Level,简写WL&#xff09;的概念&#xff0c;那么到底什么是窗宽、窗位&#xff0c;它们跟医学图像之间的关系又是什么&#xff1f; 先说一下CT值…

【Excel】使用VLOOKUP+IF实现多列条件匹配查询

excel中vlookup函数为精准匹配查找&#xff0c;但此函数局限于单列的精准匹配&#xff0c;如果需求是多列条件进行匹配&#xff0c;怎么通过vlookup函数实现呢&#xff1f; 思路&#xff1a;通过if函数将多列拼成一列再通过vlookup函数进行精准匹配 具体公式为VLOOKUP($F2&…

自己动手写TCC7901的GPIO驱动

// //TITLE: // 自己动手写TCC7901的GPIO驱动 //AUTHOR: // norains //DATE: // Monday 12-July-2010 //Environment: // Windows CE 5.0 TCC7901 // 如果你使用的是WinCE&#xff0c;然后又涉及到GPIO的操作&#xff0c;你会很尴尬地发现&#xff0c;WinCE根本就…

如何处理db2中文不显示

最近安装了db2 7.2一路装下来没有报错&#xff0c;但当打开db2时&#xff0c;不显示中文。郁闷&#xff01;请教了&#xff0c;单位资深专家&#xff0c;解决方法如下&#xff1a;SQLLIB\java\java12\jdk\jre\lib目录下font.properties.zh文件修改filename.\u5b8b\u4f53simsun.…

【转】DELPHI 对DICOM中的窗宽、窗位调整

在写这篇文章前72小时&#xff0c;我的多窗显示组件对于个别大W/C值的16位影像显示还是个问题&#xff0c;也发了帖子到PACS站询问过&#xff0c;更是在Google上猫刨了很久&#xff0c;终归一无所获&#xff0c;今天静下心来&#xff0c;用了2小时反复查看程序处理过程&#xf…

【转】解密Qt安装目录的结构

转自&#xff1a;C语言中文网 强力推荐 网址&#xff1a;http://c.biancheng.net/view/3866.html 了解 Qt 安装目录的结构虽然不是编程必须的&#xff0c;但是它能练就我们的内功&#xff0c;让我们对 Qt 的编程环境了如指掌。Windows 和 Linux 下 Qt 安装目录的结构非常相似…

大话WinCE与WinXP应用程序开发的差异性

// //TITLE: // 大话WinCE与WinXP应用程序开发的差异性 //AUTHOR: // norains //DATE: // Wednesday 21-April-2010 //Environment: // Windows CE 5.0 // Windows XP // "龙生龙&#xff0c;凤生凤&#xff0c;老鼠生的儿子会打洞"&#xff0c;所以无…

WinCE驱动的动态卸载

// //TITLE: // WinCE驱动的动态卸载 //AUTHOR: // norains //DATE: // Wednesday 21-April-2010 //Environment: // Windows CE 5.0 // 在之前的一篇《WinCE驱动的动态加载》(http://blog.csdn.net/norains/archive/2010/02/22/5316923.aspx)中有谈到&#xff0c;…

【转】09.认识一下Qt用到的开发工具

Qt 不是凭空产生的&#xff0c;它是基于现有工具链打造而成的&#xff0c;它所使用的编译器、链接器、调试器等都不是自己的&#xff0c;Qt 官方只是开发了上层工具。下面我们分几个部分讲解 Qt 使用到的工具链。 GNU 工具集 在上个世纪八十年代&#xff0c;计算机都是奢侈品…

冒个泡

好久没有上来了。也没有什么好说的。最近在做基于SVG开发的一个实时监测系统&#xff0c;感觉目前SVG性能还不是太好&#xff0c;客户端CPU不经意间就达到80%以上了。向老板提出辞职&#xff0c;不过老板没有同意&#xff0c;最终协商结果再做三个月&#xff0c;直到新人完全接…

发一个自己写的2440驱动1602的资料(电路+代码)

上个星期把MINI2440板上的富余数据线引了出来&#xff0c;看着以前丢下的1602突然有了想用ARM9驱动它的冲动&#xff0c;于是就开始干了。 代码是从以前刚学C51的时候改的&#xff0c;呵呵&#xff0c;看见以前写的代码真觉得很烂&#xff0c;现在已经整理好了。 虽说有点牛刀…

【转】10.Qt编程涉及的术语和名词

本节我们来介绍一下使用 Qt 编程过程中常用的术语和名字&#xff0c;它们不一定专属于 Qt&#xff0c;在其它的 C/C 开发过程中也会使用到。 Project Project 的中文翻译是“项目”或者“工程”&#xff0c;这里的项目是指为实现某个相对独立功能的程序代码合集&#xff0c;这…

VS2005开发WinCE6.0应用程序 更换SDK后工程的移植

在应用VS2005开发嵌入式应用程序的时候&#xff0c;一旦平台的SDK发生改变&#xff0c;原先的应用程序就打不开了。搞的偶是非常郁闷&#xff0c;一旦添加了或者更改了驱动程序&#xff0c;重新导出平台SDK以后都要重新建工程&#xff0c;再把代码拷贝到新的工程中&#xff0c;…

【转】17.Qt界面布局管理详解

在上一节&#xff0c;通过一个简单的应用程序&#xff0c;分析了 Qt 创建的 GUI 应用程序中各个文件的作用&#xff0c;剖析了可视化设计的UI文件是如何被转换为 C 的类定义&#xff0c;并自动创建界面的。这些是使用 Qt Creator 可视化设计用户界面&#xff0c;并使各个部分融…

SQL Server 清空或删除所有数据库表中的数据

方法一&#xff1a; --生成数据库脚本的方法最快,处理的也最好 sql2000企业管理器 --右键要清理的数据库 --所有任务 --生成SQL脚本 --<常规>里选择"生成全部对象脚本"","在脚本文件中包含说明性标题&quo…

linux mysql移植_linux 下mysql 移植设置方法

环境:db01:10.10.10.101db03:10.10.10.103需求:将db01上mysql做完整移植,迁移到db03详细步骤:1. 打包db01上/app目录并scp到db03上:#tar -cvzf mysql.tar.gz /app/;scp mysql.tar.gz 10.10.10.103:/root/2. copy db01上/etc/ld.so.conf.d/mysql.conf到db03相应目录下,即/etc/ld…

【转】18.Qt信号与槽机制详解

信号&#xff1a;事件 槽&#xff1a;事件处理函数 信号与槽&#xff08;Signal & Slot&#xff09;是 Qt 编程的基础&#xff0c;也是 Qt 的一大创新。因为有了信号与槽的编程机制&#xff0c;在 Qt 中处理界面各个组件的交互操作时变得更加直观和简单。 信号&#xff0…

可以买的一本书:3D计算机图形学(原书第3版)

作  者&#xff08;英&#xff09;沃特&#xff08;Watt,A.) ,包宏 译出 版 社机械工业出版社图书定价&#xffe5;69.00 第1章 计算机图形学的数学基础 11.1 处理三维结构 11.1.1 计算机图形学中的三维仿射变换 11.1.2 改变坐标系的变换 61.2 结构变形变换 71.3 向量和计算机…

网站中毒

刚做了一个网站2008-应届生-校园招聘信息博客 购买了虚拟空间&#xff0c;可是发布没几天就发现中毒了打开网站首页&#xff0c;查看源文件&#xff0c;发现页面头部被加了一段代码 下载有关的文件并没有这行代码&#xff1f;不知道为什么&#xff1f;这段代码到底加到哪里了呢…

程序员找工作那点事儿

从7月中旬回武汉之后开始系统的复习&#xff0c;到9月下旬正式开始找工作&#xff0c;最后到10月中旬结束&#xff0c;前后历时三个月&#xff0c;从前期的职业定位&#xff0c;到中期的复习准备&#xff0c;最后到后期真枪实弹的笔试面试&#xff0c;个人感觉找工作就是个系统…