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);
}
}
}
运行效果: