GridView拖動改變列寬、列順序、列排序

GridView滑鼠拖動改變列寬、列順序、列排序、行樣式。

滑鼠停留在GridView行改變背景顔色，單擊改變背景顔色，奇偶行背景顔色。

本案例資料庫采用xml文檔，GridView列、行特效的實作是封裝在：xpTable.htc檔案中。

部分代碼：

var RowStyleColor="white";               //設定行交替顔色（偶數行）
var AlternatingRowStyleColor="yellow";  //設定行交替顔色（奇數行）oldlace
var checkBoxCol=3;                       //設定checkbox所在的列(可能在拖動列的時候改變)
var sortNoneImageUrl="sortBlank.gif";    //設定圖檔路徑
var	sortUpImageUrl="sortUp.gif";
var	sortDownImageUrl="sortDown.gif";
var	posUpImageUrl="upArrow.gif";
var posDownImageUrl="downArrow.gif";
var currentSort="DOWN";         //從小到大;

var headColumns;                //标題行的列集合 
var currentRowIndex;            //目前行指針
var currentRow;                 //目前行
var selectRow = new Array();    //選擇的行
var selectRowIndex=new Array(); //選擇的行指針
var oldRow;
var length;                     //行的長度

var bDragCol;
var bDragChangeWidth;           //是否處于拖動改變列的寬度狀态狀态
var bDragMode;                  //是否處于拖動狀态

var objDragline;                //改變列寬的虛線
var objDragItem;                
var objDragToItem1;
var objDragToItem2;

var dragHeadHitIndex=-1;        //最終拖動移動到列
var dragHeadIndex=-1;           //獲得拖動在那列
var lastHeadIndex=-2; 

var posOffSet=0;
var iDragCounter;               
var offset_x, offset_y;         //element絕對位置

var allowColMove=true;          //允許整列移動
var sortAllow=true;             //允許排序
var allowColChangeWidth=true;   //允許改變列寬

var ie6; 
	

	
/*
 * 初始化表格
 ************/
function initElement()
{  

  //theadRow=element.children(0).rows(0); //得到标題
  //alert(theadRow.cells(0).innerText);   //得到标題的列
  //ie6 = (instr(window.navigator.appVersion, "MSIE 6.") <> 0);
  length=element.children(0).rows.length;
  headColumns=element.children(0).rows(0).cells;
  //alert(headColumns[1].offsetLeft)
  initSetRowColors();
  initHeadColumns();
  setTableBorder();
  initAdditionalElements();
  window.document.attachEvent("onmouseup",elementOnMouseUp);
  
}

/*
 * 初始化标題列
 **************/
function initHeadColumns()
{
   var telement;
   var imgElement;
   var headRow=element.children(0).rows(0);
   for(var i=0;i<headRow.cells.length;i++)   
   {
       telement=headRow.cells(i);
       with(telement)
       {    
           if(children.length==0) //還沒有孩子
           {   
              imgElement = document.createElement("IMG");
              with(imgElement)
              {					
		        src = sortNoneImageUrl;
		        id = "srtImg";
		        width = 9;
		        height = 9;
              }
              insertAdjacentElement("beforeEnd", imgElement);
              
           }
           else
              children(0).style.cursor = "default";
          attachEvent("onmousedown",elementHeadOnMouseDown);
          if(telement.innerText=="ID")                        //為第一列添加排序功能   
             attachEvent("ondblclick",elementHeadOnDbClick); 
       }
   }

}
           

運作效果：

案例下載下傳位址：http://download.csdn.net/detail/lovegonghui/9265987