【CSON原创】支持行拖动，列拖动的表格插件

效果预览：

支持行拖动，列拖动的表格插件
col1_head	col2_head	col3_head	col4_head
1	2	3	4
2	3	4	5
3	4	5	6
4	5	6	7
4	6	7	8

功能说明：

当鼠标移动到表头区域时可以对列进行拖动排序，鼠标移动到行区域时可以对行进行拖动排序。

支持IE6 7 8 firefox chrome

实现原理：

当鼠标在表头区域按下时，复制现有的table（不复制其后代结点），并把选择列的所有元素复制添加到新table中，通过按下时的鼠标位置和鼠标移动坐标，确定新table的位置，在行区域按下时同理。

代码分析：

var SortTable = (function() {

returnfunction(sTableId, options) {
this.init(sTableId, options);
}

})();

首先在构造函数里调用sortTable的init方法进行初始化。需要传入table的id和自定义选项对象，该对象里面包含用户自定义的属性值，对于没有传入的值，使用默认值。

SortTable.prototype = (function() {

var dragTable; //保存拖动的table
var isDragCol =false; //是否拖动列
var isDragsRow =false; //是否拖动行
var dragingIndex; //拖动的列索引或行索引

/* 点击位置相对于元素位置的位置对象 */
var relPos = {
left: 0,
top: 0,
updatePos: function(left, top) { //更新目前的相对位置
this.left = left;
this.top = top;
}

};

首先prototype里面有四个私有变量：

1.拖动中的table的引用：就是拖动行或者拖动列对象的引用

2.是否拖动列的布尔值：用户mouseover事件处理程序中判断是否处于拖动列的状态中，

3.是否拖动行的布尔值：用户mouseover事件处理程序中判断是否处于拖动列的状态中，

4.拖动行/列的索引：就是拖动的行或者列的索引值，用于查找该行/列并复制成新的table对象。

/* 设定索引和左位置值 */
var setIndexAndPos =function(elems, dir) {
dir = dir ||'left';

for (var i =0, len = elems.length; i < len; i++) {
elems[i].index = i;
if (dir =='left') {
elems[i].posLeft = util.getCurrentPosition(elems[i]).left;
}
elseif (dir =='top') {
elems[i].posTop = util.getCurrentPosition(elems[i]).top;
}

}

};

该私有方法在初始化过程中被调用，遍历元素集合，并设置其index和left或top的位置值。其中left值用于列拖动，top值用于行拖动，设定哪个值根据用户传入的dir来判断。

/* 设置新结点的样式 */
var setNewNodeStyle =function(newNode, nodeToClone) {

var newStyle = newNode.style;
var oldStyle = util.getComputedStyle(nodeToClone);
newStyle.paddingLeft = oldStyle.paddingLeft;
newStyle.paddingRight = oldStyle.paddingRight;
newStyle.paddingTop = oldStyle.paddingTop;
newStyle.paddingBottom = oldStyle.paddingBottom;
newStyle.width = nodeToClone.clientWidth - parseInt(newStyle.paddingLeft) - parseInt(newStyle.paddingRight) +'px';
newStyle.height = nodeToClone.clientHeight - parseInt(newStyle.paddingTop) - parseInt(newStyle.paddingBottom) +'px';

}

用于根据某结点设定新结点的样式，使新结点的样式和参考结点的样式相同。该私有方法将用于行拖动时使新table各个td的值和参考table中的一样，目的是使拖动行幻影的样式和表格中的行一致。

/* 把点击列整列结点复制到新table */
var copyCol =function(index, rows, dragingClass, oTable) {

var newNode;
var nodeToClone;
var newTr;
var newBody;

dragTable = oTable.cloneNode(false);
newBody = document.createElement('TBODY'); //ie下tr必须包在thead tbody或tfoot里
dragTable.appendChild(newBody);

dragTable.className +=''+ dragingClass;
for (var i =0, len = rows.length; i < len; i++) {
newTr = document.createElement('TR');

nodeToClone = rows[i].cells[index];
newNode = nodeToClone.cloneNode(true);
newTr.appendChild(newNode);
newBody.appendChild(newTr);
}
document.body.appendChild(dragTable);
}

之后的函数用于把所点击列的结点复制到新的table用作拖动幻影。需要注意的是对于IE，必须创建tbody元素，并把新table的tr包含在tbody里，否则新table的结点会显示不出来。另外新table需要添加拖动样式类，该类在初始化时由用户传入，决定拖动幻影的样式。

/* 复制行 */
var copyRow =function(oTr, dragingClass, oTable) {
var newTd;
var oldTd;
var newBody;
var dragTr;

dragTable = oTable.cloneNode(false);
newBody = document.createElement('TBODY');
dragTable.appendChild(newBody);

dragTr = oTr.cloneNode(true);
newBody.appendChild(dragTr);

dragTable.className +=''+ dragingClass;
for (var i =0, len = dragTr.cells.length; i < len; i++) {
newTd = dragTr.cells[i];
oldTd = oTr.cells[i];
setNewNodeStyle(newTd, oldTd);
}

document.body.appendChild(dragTable);

}

复制行的函数，方法和复制列大致一样，通过创建新table，并根据所拖动行的索引获取对应的tr，把该tr复制到新table中去，同样要记得创建tbody标签。

/* 拖动时更新位置 */
var updateDragingPosition =function(left, top) {
dragTable.style.left = left +'px';
dragTable.style.top = top +'px';
}

该方法在每次触发mousemove事件时调用，作用是更新拖动幻影的位置坐标，使之随着鼠标的移动而移动。

/* 放置拖动列 */
var placeCol =function(left, headers, rows) {

var halfDistant;
var parent = headers[0].parent;
var len = headers.length;

if (left < headers[0].posLeft) {
placeAllColCells(0, rows);
return;
}
else {
for (var i =0; i < len; i++) {
halfDistant = headers[i].posLeft + (headers[i].clientWidth /2);
if (left >= headers[i].posLeft && left < halfDistant) {

placeAllColCells(i, rows);

return;
}
elseif (left >= halfDistant && left < headers[i].posLeft + headers[i].clientWidth) {
placeAllColCells(i +1, rows);
return;
}
}
placeAllColCells(i, rows);
}

};

该方法用于在每次鼠标松开时，把选定的列插入到目标位置。在确定位置之前会左三个判断：

1.首先判断目前拖动幻影左位置是否小于第一个表头的左位置，是则把选定列插入到第一个列之前。

2.逐个判断处于列的前半部分还是后半部分，如果是前半部分，则插入到该列的之前，否则插入到该列之后。

3.如果之前的情况都不符合，则把结点插入到列集合的最尾。

/* 放置拖动列的所有结点 */

var placeAllColCells =function(index, rows) {

for (var i =0, len = rows.length; i < len; i++) {
var parent = rows[i].cells[0].parentNode;

if (index == rows[i].cells.length) {
parent.appendChild(rows[i].cells[dragingIndex]);
}
else {
parent.insertBefore(rows[i].cells[dragingIndex], rows[i].cells[index]);
}
}

}

函数在上面的函数确定了插入列位置之后，使用该函数进行具体的插入操作，其中如果传入的i和length相等，则表示需要插入到列集合的最后，这时需要用appendchild而非insertbefore（虽然非IE的浏览器中insertbefore可以使用不存在的“尾结点”作为参考点来进行插入操作，但是IE会报错，所以为了兼容，还是应该使用appendchild进行插入）。

/* 放置拖动行 */
var placeRow =function(top, rows) {
var halfDistant;
var parent = rows[0].parentNode;
var len = rows.length;

if (top < rows[0].posTop) {
parent.insertBefore(rows[dragingIndex], rows[0]);
return;
}
else {

for (var i =0; i < len; i++) {
halfDistant = rows[i].posTop + (rows[i].clientHeight /2);
if (top >= rows[i].posTop && top < halfDistant) {
parent.insertBefore(rows[dragingIndex], rows[i]);
return;
}
elseif (top >= halfDistant && top < rows[i].posTop + rows[i].clientHeight) {
i +1< len ? parent.insertBefore(rows[dragingIndex], rows[i +1]) : parent.appendChild(rows[dragingIndex]);
return;
}
}
parent.appendChild(rows[dragingIndex]);
}

};

放置拖动行的函数，该函数思路和放置拖动列的差不多，也是通过对三种情况的判断，确定行插入位置，再进行具体的插入操作，详细可以参考上面的列插入操作。

/* 删除拖动幻影列 */
var removeShadowArray =function() {

document.body.removeChild(dragTable);

};

该函数用于在鼠标松开时，删除拖动幻影。

/* 鼠标按下事件处理程序 */
var downHandler =function(rows, dragingClass, oTable, onBeginDrag) {

returnfunction(event) {
var _elemPosition;
var event = util.getEventObj(event);
var target = util.getEventTarget(event);
var selectedTr;

if (target.tagName !=='TH'&& target.tagName !=='TD'&& target.parentNode.tagName !=='TH') {
return;
}
else {
onBeginDrag(); //执行开始拖动的回调函数

if (target.tagName =='TH') { //判断点击是否为th（列拖动）
dragingIndex = target.index;
_elemPosition = util.getCurrentPosition(target);
relPos.updatePos(event.clientX - _elemPosition.left, event.clientY - _elemPosition.top);
copyCol(dragingIndex, rows, dragingClass, oTable);
isDragCol =true;
}

elseif (target.tagName =='TD') { //判断点击是否为td（行拖动）

selectedTr = target.parentNode;
dragingIndex = selectedTr.index;
_elemPosition = util.getCurrentPosition(selectedTr);
relPos.updatePos(event.clientX - _elemPosition.left, event.clientY - _elemPosition.top);
copyRow(selectedTr, dragingClass, oTable);
isDragsRow =true;
}

updateDragingPosition(event.clientX - relPos.left, event.clientY - relPos.top); //更新拖动幻影位置
}

}

};

鼠标按下时的事件处理程序，其中的onBeginDrag是用户初始化时定义的开始拖动的回调函数。然后判断点击区域，再进行相应的行拖动或列拖动。最后调用updateDragingPosition函数更新拖动幻影的位置。

/* 鼠标拖动事件处理程序 */
var moveHandler =function(oTable, onDraging) {
returnfunction(event) {

var event = util.getEventObj(event);
var target = util.getEventTarget(event);

if (isDragCol || isDragsRow) {
onDraging();
updateDragingPosition(event.clientX - relPos.left, event.clientY - relPos.top, oTable);

}

}

};

鼠标拖动的处理程序，其中如果是行拖动或者列拖动状态，则更新拖动幻影的坐标（行拖动和列拖动使用同一个更新函数）。并调用onDraging函数，该函数在初始化时由用户定义，在拖动期间执行。

/* 鼠标松开事件处理程序 */
var upHandler =function(headers, rows, tBodyRows, onEndDrag) {
returnfunction(event) {

var event = util.getEventObj(event);
var target = util.getEventTarget(event);
if (!isDragCol &&!isDragsRow) {
return;
}
else {
if (isDragCol) {

placeCol(event.clientX - relPos.left, headers, rows);
isDragCol =false;
setIndexAndPos(headers, 'left');

}
elseif (isDragsRow) {
placeRow(event.clientY - relPos.top, tBodyRows);
isDragsRow =false;
setIndexAndPos(tBodyRows, 'top');

}
removeShadowArray();
onEndDrag();

}

}

}

鼠标松开时的事件处理程序，把相应的拖动状态值设置为false，并调用removeShadowArray函数把拖动幻影的table从文档中删除。最后触发onEndDrag回调函数，该函数由用户在初始化时定义。

/* 为事件添加处理程序 */
var addDragHandler =function(rows, dragingClass, oTable, headers, tBodyRows, onBeginDrag, onEndDrag, onDraging) {
util.addEventHandler(document, 'mousedown', downHandler(rows, dragingClass, oTable, onBeginDrag));
util.addEventHandler(document, 'mousemove', moveHandler(oTable, onDraging));
util.addEventHandler(document, 'mouseup', upHandler(headers, rows, tBodyRows, onEndDrag));

};

为拖动事件添加事件处理程序。

return {
/* 初始化 */
init: function(sTableId, options) {

var defaults = {
dragingClass: 'draging',
onBeginDrag: util.emptyFunction,
onEndDrag: util.emptyFunction,
onDraging: util.emptyFunction

};
util.extend(defaults, options);

this.oTable = util.$(sTableId);
this.rows =this.oTable.rows;
this.tHead =this.oTable.tHead;
this.tBody =this.oTable.tBodies[0];
this.headers =this.tHead.rows[0].cells;
this.dragingClass = defaults.dragingClass;
this.onBeginDrag = util.bindFunction(defaults.onBeginDrag);
this.onEndDrag = util.bindFunction(defaults.onEndDrag);
this.onDraging = util.bindFunction(defaults.onDraging);

setIndexAndPos(this.headers, 'left');
setIndexAndPos(this.tBody.rows, 'top');

addDragHandler(this.rows, this.dragingClass, this.oTable, this.headers, this.tBody.rows, this.onBeginDrag, this.onEndDrag, this.onDraging);

}

}

})();

最后返回prototype对象，其中的init方法用户初始化。另外需要注意的是三个回调函数由于使用了bindFunction，因此它们调用时this指向该SortTable对象，可以方便地使用该对象中的属性值。

new SortTable('sTable');

最后是调用方法。

所有源代码：

View Code

欢迎转载，请标明出处：http://www.cnblogs.com/Cson/archive/2011/07/08/2101317.html

posted @ 2011-07-08 20:41 Cson 阅读(4893) 评论(40) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

【CSON原创】 支持行拖动，列拖动的表格插件

公告

【CSON原创】支持行拖动，列拖动的表格插件