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?==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多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。