163郵件一個(gè)比較爽的功能就是
可以通過(guò)多選郵件，拖動(dòng)到左側(cè)的文件夾列表，實(shí)現(xiàn)郵件歸類的功能
關(guān)于我對(duì)拖動(dòng)分配的實(shí)現(xiàn)將在后文寫出
這里說(shuō)說(shuō)在CheckBox的選擇中做得嘗試和實(shí)現(xiàn)的效果、方法

1。點(diǎn)擊表格Title實(shí)現(xiàn)全選每行
這個(gè)早有人做了,我這里借鑒一下 一塊貼出來(lái)方便大家看
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);
}
后臺(tái)GridView調(diào)用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。點(diǎn)擊GridView每行，實(shí)現(xiàn)選中當(dāng)前行，按住shift實(shí)現(xiàn)多選
在JS里，事件有個(gè)Bubble過(guò)程，大致就是元素的事件（click等）
會(huì)先觸發(fā)當(dāng)前元素的事件，然后觸發(fā)上級(jí)元素事件
<body?onclick="alert('1')">
<input?onclick="alert('2')">
</body> 點(diǎn)擊文本框?qū)⒁来翁崾?2 ,1

因此，點(diǎn)擊GridView每行，實(shí)現(xiàn)選中當(dāng)前行，只要考慮對(duì)TR元素進(jìn)行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);
}
上面的代碼有兩個(gè)if
第一個(gè)判斷觸發(fā)事件的元素是不是checkBox或者鏈接元素
前者是因?yàn)楸旧砭褪沁x中事件，后者是因?yàn)殒溄討?yīng)該是進(jìn)行其他操作而不是選擇當(dāng)前行

第二個(gè)鏈接是用來(lái)實(shí)現(xiàn)對(duì)按住shift進(jìn)行多選的實(shí)現(xiàn)
畢竟一個(gè)個(gè)點(diǎn)太麻煩了
163郵箱的shift多選邏輯我沒(méi)看大明白
于是按照windows的shift多選大致做的：
記住按shift之前的點(diǎn)擊行，按住shift點(diǎn)擊新行后，兩者之間的所有行按照最后點(diǎn)擊新行的新狀態(tài)copy
其中的mov和mou是前文提到的刷新選中顏色的函數(shù)
RefreshRowState先不用管
是后面用來(lái)統(tǒng)計(jì)選中狀態(tài)的 就是“您選擇了**條數(shù)據(jù)”

后臺(tái)的代碼變成了
????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";
????????}
????}
對(duì)于按住Ctrl實(shí)現(xiàn)多選，沒(méi)有必要實(shí)現(xiàn)，因?yàn)椴煌趙indows的單擊單選，
gridView本來(lái)就是按住ctrl的效果了(單擊增加、刪除選擇)

轉(zhuǎn)載于:https://www.cnblogs.com/calmzeal/archive/2007/07/29/835416.html

總結(jié)

以上是生活随笔為你收集整理的js+ asp.Net ajax开发163邮箱效果（列表底色、多选拖动等)--checkBox多选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。