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