js+asp.Net+ajax打造163邮箱效果--checkBox多选
163邮箱可以通过多选邮件,拖动到左侧的文件夹列表,实现邮件归类的功能
关于我对拖动分配的实现将在后文写出
这里说说在CheckBox的选择中做得尝试和实现的效果、方法
1。点击表格Title实现全选每行
这个早有人做了,我这里借鉴一下 一块贴出来方便大家看
事件:
后台GridView调用js:
2。点击GridView每行,实现选中当前行,按住shift实现多选
在JS里,事件有个Bubble过程,大致就是元素的事件(click等)
会先触发当前元素的事件,然后触发上级元素事件
点击文本框将依次提示 2 ,1
因此,点击GridView每行,实现选中当前行,只要考虑对TR元素进行onclick事件处理即可
完整的js代码如下:
RefreshRowStates(obj.parentNode.parentNode);
}
上面的代码有两个if
第一个判断触发事件的元素是不是checkBox或者链接元素
前者是因为本身就是选中事件,后者是因为链接应该是进行其他操作而不是选择当前行
第二个链接是用来实现对按住shift进行多选的实现
毕竟一个个点太麻烦了
163邮箱的shift多选逻辑我没看大明白
于是按照windows的shift多选大致做的:
记住按shift之前的点击行,按住shift点击新行后,两者之间的所有行按照最后点击新行的新状态copy
其中的mov和mou是前文提到的刷新选中颜色的函数
RefreshRowState先不用管
是后面用来统计选中状态的 就是“您选择了**条数据”
后台的代码变成了
protected
}
对于按住Ctrl实现多选,没有必要实现,因为不同于windows的单击单选,
gridView本来就是按住ctrl的效果了(单击增加、删除选择)