Heim >Web-Frontend >js-Tutorial >JGrid中拖动改变列宽的脚本原型_javascript技巧

JGrid中拖动改变列宽的脚本原型_javascript技巧

WBOYOriginal: 2016-05-16 19:02:461196Durchsuche

顺便，把我研究过的，如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突，详情见代码2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jgrid拖动改变表格宽度</title> 
<style type="text/css"> 
 
</style> 
 
 
<div> 
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> 
    <colgroup> 
        <col style="width:200px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table> 
</div> 
<script language="javascript" type="text/javascript"> 
var JPos = {}; 
(function($){ 
     
    $.getAbsPos = function(pTarget){ 
        var x_ = y_ = 0; 
         
        if(pTarget.style.position != "absolute"){         
            while(pTarget.offsetParent){ 
                    x_ += pTarget.offsetLeft; 
                    y_ += pTarget.offsetTop; 
                    pTarget = pTarget.offsetParent; 
            } 
        } 
            x_ += pTarget.offsetLeft; 
            y_ += pTarget.offsetTop; 
        return {x:x_,y:y_}; 
    } 
     
    $.getEventPos = function(evt){ 
            var _x,_y; 
            evt = JEvent.getEvent(evt); 
            if(evt.pageX || evt.pageY){ 
                _x = evt.pageX; 
                _y = evt.pageY; 
            }else if(evt.clientX || evt.clientY){ 
                _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft); 
                _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop); 
            }else{ 
                return $.getAbsPos(evt.target);     
            } 
            return {x:_x,y:_y};     
    }     
     
})(JPos); 
//======================================================================================= 
var JEvent = {}; 
(function($){ 
    $.getEvent = function(evt){               
        evt = window.event || evt; 
                     
        if(!evt){ 
            var fun = JEvent.getEvent.caller; 
            while(fun != null){ 
                evt = fun.arguments[0]; 
                if(evt && evt.constructor == Event) 
                    break; 
                fun = fun.caller; 
            } 
        } 
             
        return evt; 
    } 
     
    $.doEvent = function(fun){ 
        var args = arguments; 
        return function(){ 
            return fun(args); 
        } 
    } 
})(JEvent); 
//======================================================================================= 
var colIndex; 
var dataTable = document.getElementById("dataTable"); 
var cols = dataTable.getElementsByTagName("COL"); 
var dragMask = document.createElement("DIV"); 
var mAWidth = mAHeight = 300; 
document.body.insertBefore(dragMask,document.body.lastChild); 
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; 
var mask_mousemove = function(evt){ 
    if(document.selection){//IE ,Opera 
        if(document.selection.empty) 
            document.selection.empty();//IE 
        else{//Opera 
            document.selection = null; 
        } 
    }else if(window.getSelection){//FF,Safari 
        window.getSelection().removeAllRanges(); 
    } 
     
    var oPos = JPos.getAbsPos(this); 
    var mPos = JPos.getEventPos(evt); 
     
    var x = mPos.x - oPos.x - mAWidth / 2; 
    var tmpX = parseInt(cols[colIndex].style.width) + x; 
    dragMask.style.left = mPos.x - mAWidth / 2 + "px"; 
    cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px"; 
    if(!document.all) 
        dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 
} 
var mask_mouseup = function(evt){ 
    dragMask.style.display = "none"; 
} 
dragMask.onmousemove = mask_mousemove; 
dragMask.onmouseup = mask_mouseup; 
var cell_mousedown = function(evt){ 
    colIndex = this.colIndex; 
    var mPos = JPos.getEventPos(evt); 
    with(dragMask.style){ 
        left = mPos.x - mAWidth / 2  + "px"; 
        top = mPos.y - mAHeight / 2 + "px"; 
        display = ""; 
    } 
} 
var chk_click = function(evt){ 
    var obj = cols[this.colIndex]; 
    if(this.checked){ 
        obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;"; 
    }else{ 
        obj.css_ = obj.style.cssText; 
        obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;"; 
    } 
} 
var i , o; 
var label ,chk; 
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){ 
    o.colIndex = i; 
    o.onmousedown = cell_mousedown; 
     
    label = document.createElement("LABEL"); 
    document.body.insertBefore(label,document.body.lastChild); 
    chk = document.createElement("INPUT"); 
    chk.type = "checkbox"; 
    label.appendChild(chk); 
    chk.onclick = chk_click; 
    chk.colIndex = i; 
    chk.checked = "checked"; 
    label.appendChild(document.createTextNode(o.innerHTML)); 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

修改版2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jgrid拖动改变表格宽度_修改版</title> 
<style type="text/css"> 
 
</style> 
 
 
<div> 
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"> 
    <colgroup> 
        <col style="width:200px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table> 
</div> 
<script language="javascript" type="text/javascript"> 
var JPos = {}; 
(function($){ 
     
    $.getAbsPos = function(pTarget){ 
        var x_ = y_ = 0; 
         
        if(pTarget.style.position != "absolute"){         
            while(pTarget.offsetParent){ 
                    x_ += pTarget.offsetLeft; 
                    y_ += pTarget.offsetTop; 
                    pTarget = pTarget.offsetParent; 
            } 
        } 
            x_ += pTarget.offsetLeft; 
            y_ += pTarget.offsetTop; 
        return {x:x_,y:y_}; 
    } 
     
    $.getEventPos = function(evt){ 
            var _x,_y; 
            evt = JEvent.getEvent(evt); 
            if(evt.pageX || evt.pageY){ 
                _x = evt.pageX; 
                _y = evt.pageY; 
            }else if(evt.clientX || evt.clientY){ 
                _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft); 
                _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop); 
            }else{ 
                return $.getAbsPos(evt.target);     
            } 
            return {x:_x,y:_y};     
    }     
     
})(JPos); 
//======================================================================================= 
var JEvent = {}; 
(function($){ 
    $.getEvent = function(evt){               
        evt = window.event || evt; 
                     
        if(!evt){ 
            var fun = JEvent.getEvent.caller; 
            while(fun != null){ 
                evt = fun.arguments[0]; 
                if(evt && evt.constructor == Event) 
                    break; 
                fun = fun.caller; 
            } 
        } 
             
        return evt; 
    } 
     
    $.doEvent = function(fun){ 
        var args = arguments; 
        return function(){ 
            return fun(args); 
        } 
    } 
})(JEvent); 
//======================================================================================= 
var colIndex; 
var dataTable = document.getElementById("dataTable"); 
var cols = dataTable.getElementsByTagName("COL"); 
var dragMask = document.createElement("DIV"); 
var mAWidth = mAHeight = 300; 
document.body.insertBefore(dragMask,document.body.lastChild); 
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;"; 
var mask_mousemove = function(evt){ 
    if(document.selection){//IE ,Opera 
        if(document.selection.empty) 
            document.selection.empty();//IE 
        else{//Opera 
            document.selection = null; 
        } 
    }else if(window.getSelection){//FF,Safari 
        window.getSelection().removeAllRanges(); 
    } 
     
    var oPos = JPos.getAbsPos(this); 
    var mPos = JPos.getEventPos(evt); 
     
    var x = mPos.x - oPos.x - mAWidth / 2; 
    var tmpX = parseInt(cols[colIndex].style.width) + x; 
    dragMask.style.left = mPos.x - mAWidth / 2 + "px"; 
    cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px"; 
    if(!document.all) 
        dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。 
} 
var mask_mouseup = function(evt){ 
    dragMask.style.display = "none"; 
} 
dragMask.onmousemove = mask_mousemove; 
dragMask.onmouseup = mask_mouseup; 
var cell_mousedown = function(evt){ 
    colIndex = this.colIndex; 
    var mPos = JPos.getEventPos(evt); 
    with(dragMask.style){ 
        left = mPos.x - mAWidth / 2  + "px"; 
        top = mPos.y - mAHeight / 2 + "px"; 
        display = ""; 
    } 
} 
var chk_click = function(evt){ 
    var obj = cols[this.colIndex]; 
    if(this.checked){ 
        obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;"; 
    }else{ 
        obj.css_ = obj.style.cssText; 
        obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;"; 
    } 
} 
var i , o; 
var label ,chk; 
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){ 
    o.colIndex = i; 
    o.onmousedown = cell_mousedown; 
     
    label = document.createElement("LABEL"); 
    document.body.insertBefore(label,document.body.lastChild); 
    chk = document.createElement("INPUT"); 
    chk.type = "checkbox"; 
    label.appendChild(chk); 
    chk.onclick = chk_click; 
    chk.colIndex = i; 
    chk.checked = "checked"; 
    label.appendChild(document.createTextNode(o.innerHTML)); 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

ff下拖动时一大块影子是怎么产生的呢

是故意显示出来的。
把 -moz-opacity:0.1;opacity: 0.1 改掉。

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：点图片上一页下一页翻页效果_图象特效Nächster Artikel：JS暴虐查找法简洁版_javascript技巧

In Verbindung stehende Artikel

Mehr sehen