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>

<asp:CheckBox ID="chbox" runat="server" />

</ItemTemplate>

2。点击GridView每行，实现选中当前行，按住shift实现多选
在JS里，事件有个Bubble过程，大致就是元素的事件（click等）
会先触发当前元素的事件，然后触发上级元素事件

</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 ==2) break;

}

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的效果了(单击增加、删除选择)

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

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

初学 ASP.NET AJAX (一)：构建 ASP.NET AJAX 开发环境
1 概述 Microsoft ASP.NET AJAX 是 Microsoft 公司对 Ajax 技术的完美封装.它能使你已快速的创建包含丰富用户体验的用户界面的 Web 页面,提供加入了跨浏览器的 ...
用ASP.NET AJAX 开发Web程序 — UpdatePanel篇
链接:[url]http://tech.it168.com/n/2007-07-12/200707120917218.shtml[/url] 摘要:本文介绍ASP.NET AJAX Extension ...
asp.net抓取163邮箱联系人实现代码
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
java mail 接收邮箱163_JavaMail实现简单邮件开发——163邮箱
1.打开 P0P3/SMTP/IMAP 2.开发工具类 CodeUtils.java package com.demo.mymail.utils; import java.util.UUID; pub ...
php实现单选和多选功能,input:checkbox多选框实现单选效果跟radio一样
最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他 ...
ASP.NET AJAX 在Web开发中的应用
摘要 ASP.NET AJAX 实现了Web页面丰富的部分刷新效果.本文通过介绍AJAX原理,引申到ASP.NET AJAX原理,并总结了在Web 开发应用中要注意的若干问题.合理地利用ASP.NE ...
Asp.Net Ajax的两种基本开发模式
Asp.Net Ajax的两种基本开发模式引言最近花了一些时间,将微软Asp.Net官方的Ajax视频全部看了一遍,地址是http://www.asp.net/learn/ajax-videos/ ...
ASP.NET AJAX（开发代号Atlas）重要参考资源大收集
英文网站部分 http://www.google.com 或者http://search.msn.com :不必多说 ASP.NET AJAX官方网站:不用多说了-- ASP.NET AJAX Con ...
创建定制的ASP.NET AJAX非可视化客户端组件
一.简介在本文中,我们将共同讨论如何创建一个由基类Sys.Component派生的ASP.NET AJAX非可视化客户端组件,并将展示它在Web页面中的用法. 具体说来,你将学习如何实现: ◆使用p ...

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

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

最新文章

热门文章