GridView之精讲作品:可以前台排序，左右移动GridView中选中行的东西

var Main_Tab = null; var cur_row = null; var cur_col = null; var cur_cell = null; var Org_con = ""; var sort_col = null; var show_col = false; var charMode = true; var act_bgc = "#BEC5DE"; var act_fc = "black"; var cur_bgc = "#ccffcc"; var cur_fc = "black"; function window.onload(){ init(); drag = document.createElement("DIV"); drag.innerHTML = ""; drag.style.textAlign = "center"; drag.style.position = "absolute"; drag.style.cursor = "hand"; drag.style.border = "1 solid black"; drag.style.display = "none"; drag.style.zIndex = "999"; document.body.insertBefore(drag); //setInterval("judge_move()",100); } function init(){ cur_row = null; cur_col = null; cur_cell = null; sort_col = null; Main_Tab = PowerTable; read_def(Main_Tab) Main_Tab.onmouseover = overIt; Main_Tab.onmouseout = outIt; Main_Tab.onclick = clickIt; Main_Tab.ondblclick = dblclickIt; Org_con = Main_Tab.outerHTML; arrowUp = document.createElement("SPAN"); arrowUp.innerHTML = "5"; arrowUp.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px"; arrowDown = document.createElement("SPAN"); arrowDown.innerHTML = "6"; arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px"; } function judge_move(){ move[0].disabled=(cur_row == null || cur_row<=1); move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0); move[2].disabled=(cur_col == null || cur_col==0); move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1); } document.onselectstart = function(){return false;} document.onmouseup = drag_end; function clear_color(){ the_table=Main_Tab; if(cur_col!=null){ for(i=0;i<the_table.rows.length;i++){ with(the_table.rows[i].cells[cur_col]){ style.backgroundColor=oBgc; style.color=oFc; } } } if(cur_row!=null){ for(i=0;i<the_table.rows[cur_row].cells.length;i++){ with(the_table.rows[cur_row].cells[i]){ style.backgroundColor=oBgc; style.color=oFc; } } } if(cur_cell!=null){ cur_cell.children[0].contentEditable = false; with(cur_cell.children[0].runtimeStyle){ borderLeft=borderTop=""; borderRight=borderBottom=""; backgroundColor=""; paddingLeft=""; textAlign=""; } } } function document.onclick(){ window.status = ""; clear_color(); cur_row = null; cur_col = null; cur_cell = null; } function read_def(the_table){ for(var i=0;i<the_table.rows.length;i++){ for(var j=0;j<the_table.rows[i].cells.length;j++){ with(the_table.rows[i]){ cells[j].oBgc = cells[j].currentStyle.backgroundColor; cells[j].oFc = cells[j].currentStyle.color; if(i==0){ cells[j].onmousedown = drag_start; cells[j].onmouseup = drag_end; } } } } } function get_Element(the_ele,the_tag){ the_tag = the_tag.toLowerCase(); if(the_ele.tagName.toLowerCase()==the_tag)return the_ele; while(the_ele=the_ele.offsetParent){ if(the_ele.tagName.toLowerCase()==the_tag)return the_ele; } return(null); } var dragStart = false; var dragColStart = null; var dragColEnd = null; function drag_start(){ var the_td = get_Element(event.srcElement,"td"); if(the_td==null) return; dragStart = true; dragColStart = the_td.cellIndex; drag.style.width = the_td.offsetWidth; drag.style.height = the_td.offsetHeight; function document.onmousemove(){ drag.style.display = ""; drag.style.top = event.y - drag.offsetHeight/2; drag.style.left = event.x - drag.offsetWidth/2; for(var i=0;i<Main_Tab.rows[0].cells.length;i++){ with(Main_Tab.rows[0].cells[i]){ if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){ runtimeStyle.backgroundColor=act_bgc; dragColEnd=cellIndex; }else{ runtimeStyle.backgroundColor=""; } } } if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null; } drag.innerHTML = the_td.innerHTML; drag.style.backgroundColor = the_td.oBgc; drag.style.color = the_td.oFc; } function drag_end(){ dragStart = false; drag.style.display="none"; drag.innerHTML = ""; drag.style.width = 0; drag.style.height = 0; for(var i=0;i<Main_Tab.rows[0].cells.length;i++){ Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor=""; } if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){ change_col(Main_Tab,dragColStart,dragColEnd); if(dragColStart==sort_col)sort_col=dragColEnd; else if(dragColEnd==sort_col)sort_col=dragColStart; document.onclick(); } dragColStart = null; dragColEnd = null; document.onmousemove=null; } function clickIt(){ event.cancelBubble=true; var the_obj = event.srcElement; var i = 0 ,j = 0; if(cur_cell!=null && cur_row!=0){ cur_cell.children[0].contentEditable = false; with(cur_cell.children[0].runtimeStyle){ borderLeft=borderTop=""; borderRight=borderBottom=""; backgroundColor=""; paddingLeft=""; textAlign=""; } } if(the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr"){ var the_td = get_Element(the_obj,"td"); if(the_td==null) return; var the_tr = the_td.parentElement; var the_table = get_Element(the_td,"table"); var i = 0; clear_color(); cur_row = the_tr.rowIndex; cur_col = the_td.cellIndex; if(cur_row!=0){ for(i=0;i<the_tr.cells.length;i++){ with(the_tr.cells[i]){ style.backgroundColor=cur_bgc; style.color=cur_fc; } } }else{ if(show_col){ for(i=1;i<the_table.rows.length;i++){ with(the_table.rows[i].cells[cur_col]){ style.backgroundColor=cur_bgc; style.color=cur_fc; } } } the_td.mode = !the_td.mode; if(sort_col!=null){ with(the_table.rows[0].cells[sort_col]) removeChild(lastChild); } with(the_table.rows[0].cells[cur_col]) appendChild(the_td.mode?arrowUp:arrowDown); sort_tab(the_table,cur_col,the_td.mode); sort_col=cur_col; } } } function dblclickIt(){ event.cancelBubble=true; if(cur_row!=0){ var the_obj = event.srcElement; if(the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr"){ var the_td = get_Element(the_obj,"td"); if(the_td==null) return; cur_cell = the_td; if(the_td.children.length!=1) the_td.innerHTML="<div>" + the_td.innerHTML + "</div>"; else if(the_td.children.length==1 && the_td.children[0].tagName.toLowerCase()!="div") the_td.innerHTML="<div>" + the_td.innerHTML + "</div>"; cur_cell.children[0].contentEditable = true; with(cur_cell.children[0].runtimeStyle){ borderRight=borderBottom="buttonhighlight 1px solid"; borderLeft=borderTop="black 1px solid"; backgroundColor="#dddddd"; paddingLeft="5px"; //textAlign="center"; } } } } function overIt(){ if(dragStart)return; var the_obj = event.srcElement; var i = 0; if(the_obj.tagName.toLowerCase() != "table"){ var the_td = get_Element(the_obj,"td"); if(the_td==null) return; var the_tr = the_td.parentElement; var the_table