您的位置：首页 > Web前端 > JavaScript

JS-Demo2：JavaScript版TableGrid，表格头、分页表格冻结,表格头可拉动

2015-12-12 01:07 597 查看

上两天写了一个关于表格头可以拖动：JS-Demo1：JavaScript实现表格列拖动

这次在拖动的效果上，实现表格头冻结等。上图：

代码比较长，感兴趣的朋友，不妨复制看看

代码：

[html] view
plaincopy

<!DOCTYPE html>

<html>

<head>

<title>表格冻结</title>

<style type="text/css">

table{

color: #000;

font: normal 12px 宋体,tahoma,arial,verdana,sans-serif;

table-layout:fixed;

}

#theadTable,#tfootTable tr{

background-color: #CBDDF3;

border: 1px solid #7BBDFF;

}

td,th{

white-space: nowrap;

overflow:hidden;

}

td{

line-height: 16px;

}

.dragable{

width: 3px;

height:100%;

cursor: col-resize;

/*下面3个样式与效果有一定关系,其他无所谓*/

float: right;

position: relative;

right: 0px;

}

</style>



<script type="text/javascript">

/***************************************************************************/

/**

* 为了方便看效果,写了个jQuery的简单实现,实际应用中,可以去掉这个，而引用jquery.js，无影响。

*/

function jQuery(expression){

expression = expression.substring(1);

this[0] = document.getElementById(expression);

this.val = function(v){

if(v!=undefined) this[0].value = v;

else return this[0].value;

}

return this;

}

window.$ = jQuery;

/***************************************************************************/

var draging = false; //是否拖拽中

var dragElement = null; //当前拖拽的th

var offsetLeft = 0; //当前拖拽的th与绝对左坐标

var verticalLine = undefined; //竖线

var draggedWidth = 0; //拖拽时th的宽度，当鼠标mouseup时，th的宽度为该值

function mousedown(){

if(draging) return;

draging = true;

dragElement = window.event.srcElement.parentNode;

dragElement.theadtd = theadTable.rows(0).cells(dragElement.cellIndex);

dragElement.tfoottd = tfootTable.rows(0).cells(dragElement.cellIndex);

dragElement.tbodytd = {style:{}};//当表格中没有数据时,赋值这么一个对象,不引起js报错。

if(tbodyTable.rows.length>0)//当表格中有数据时

dragElement.tbodytd = tbodyTable.rows(0).cells(dragElement.cellIndex);

offsetLeft = dragElement.offsetLeft;

document.body.style.cursor = "col-resize";

document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)

if(verticalLine==undefined){

verticalLine = createVerticalLine();

}

}

function mouseup(){

if(!draging) return;

draging = false;

document.body.style.cursor = "auto";

document.body.onselectstart = function(){return true};

verticalLine.style.display = "none";

dragElement.style.width = draggedWidth;

dragElement.theadtd.style.width = draggedWidth;

dragElement.tbodytd.style.width = draggedWidth;

dragElement.tfoottd.style.width = draggedWidth;

dragElement = null;

}

function mousemove(){

if(draging && dragElement){

if(event.clientX-offsetLeft>0){

draggedWidth = event.clientX-offsetLeft;

verticalLine.style.left = event.clientX+8;

verticalLine.style.display = "block";

}

}

}

//创建触发拖动表格列的span：<span class="dragable" onmousedown="mousedown();"> </span>

function createSpan(){

var span = document.createElement("span");

span.className = "dragable";

span.attachEvent("onmousedown",mousedown);

span.innerHTML = " ";

return span;

}

//创建拖动时的效果(竖线):<div style="z-index: 10; position: absolute; background-color: #c3c3c3; width: 6px; display: none; height: ?px; top: 24px; left: 608px"></div>

function createVerticalLine(){

var div = document.createElement("div");

div.style.position = "absolute";

div.style.display = "none";

div.style.backgroundColor = "#C3C3C3";

div.style.width = "6px";

div.style.height = tbodyDiv.style.height;

div.style.top = tbodyTable.offsetTop;

div.style.zIndex = "10";

div.innerHTML = " ";

document.body.appendChild(div);

return div;

}

var mainDiv;

var theadDiv,tbodyDiv,tfootDiv;

var theadTable,tbodyTable,tfootTable;

window.onload = function(){

mainDiv = $("#mainDiv")[0];

theadDiv = $("#theadDiv")[0];

tbodyDiv = $("#tbodyDiv")[0];

tfootDiv = $("#tfootDiv")[0];

theadTable = $("#theadTable")[0];

tbodyTable = $("#tbodyTable")[0];

tfootTable = $("#tfootTable")[0];

/* dragable 效果 */

//在theadTable中的th内容中添加span

var theadThs = theadTable.getElementsByTagName("th");

for(var i=0;i<theadThs.length;i++)

theadThs[i].appendChild(createSpan());

theadTable.style.width = tbodyTable.style.width = tfootTable.style.width = Math.max(theadTable.offsetWidth,tbodyTable.offsetWidth,tfootTable.offsetWidth);

var ths = theadTable.rows(0).getElementsByTagName("th");

var tfs = tfootTable.rows(0).getElementsByTagName("td");

var tds;//当表格中没有数据时,赋值这么一个对象,不引起js报错。

if(tbodyTable.rows.length>0){

tds = tbodyTable.rows(0).getElementsByTagName("td");

}else{

tds = new Array();

for(var i=0;i<ths.length;i++){

tds[tds.length] = {style:{},offsetWidth:0};

}

}

if(ths.length!=tds.length && tds.length!=tfs.length){

alert("长度不一致");

}

for(var i=0;i<ths.length;i++){

var width;

if(ths[i].style.width) width = ths[i].style.width;

else if(ths[i].width) width = ths[i].width;

else width = Math.max(ths[i].offsetWidth,tds[i].offsetWidth,tfs[i].offsetWidth);

if(i!=ths.length-1)

ths[i].style.width = tds[i].style.width = tfs[i].style.width = width;

}

}

/**

* 当tfootdiv横向滚动时,theadDiv与tbodyDiv同时滚动。

* @param tfootDiv

*/

function togetherScroll(scrollingDiv){

theadDiv.scrollLeft = scrollingDiv.scrollLeft;

tbodyDiv.scrollLeft = scrollingDiv.scrollLeft;

tfootDiv.scrollLeft = scrollingDiv.scrollLeft;

}

</script>

</head>

<body onmousemove="mousemove();" onmouseup="mouseup();">

<span style="font-weight: bold;font-size: 14px;">

JavaScript版TableGrid说明:<br>

1、暂时不支持表格跨行跨列<br>

2、暂时不支持表格冻结列<br>

</span>

<div id="mainDiv" style="height: 500px;width: 100%;">

<div id="theadDiv" style="width:100%;height:16px;overflow-y:scroll;overflow-x:hidden;">

<table id="theadTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;">

<thead>

<tr>

<th style="width: 120px;">网站名称</th>

<th style="width: 300px;">网站地址</th>

<th width="50px;">用户名</th>

<th width="50px;">密码</th>

<th width="180px;">邮箱</th>

<th>手机号码</th>

<th>备注</th>

<th>操作</th>

</tr>

</thead>

</table>

</div>

<div id="tbodyDiv" style="width:100%;height:444px;overflow-y:scroll;overflow-x:hidden;background-color: #FAFAFA;" onscroll="togetherScroll(this)">

<table id="tbodyTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-style: solid;">

<tbody id="content">



</tbody>

</table>

</div>

<div id="tfootDiv" style="width:100%;height:40px;overflow-y:scroll;overflow-x:scroll;" onscroll="togetherScroll(this)">

<table id="tfootTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;">

<tfoot>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td style="text-align: right;">第一页上一页</td>

<td style="text-align: center;align:justify"><input type="text" style="width: auto;"><button type="button">Go</button></td>

<td style="text-align: left;">下一页最后一页</td>

<td> </td>

<td>1 - 30 共 30 条</td>

</tr>

</tfoot>

</table>

</div>

</div>

<script type="text/javascript">

//动态生成30行数据,可以把如下代码删除，以便测试无数据时无误。

var content = $("#content")[0];

for(var i=0;i<30;i++){

var row = content.insertRow();

row.insertCell().innerHTML = 'Siuon\'s CSDN Blog';

row.insertCell().innerHTML = '<a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a>';

row.insertCell().innerHTML = 'Siuon';

row.insertCell().innerHTML = '123456';

row.insertCell().innerHTML = 'xiaochunyong@gmail.com';

row.insertCell().innerHTML = '1862152####';

row.insertCell().innerHTML = '...';

row.insertCell().innerHTML = '<a href="javascript:alert(\'修改\');">修改</a> <a href="javascript:alert(\'删除\');">删除</a>';

}

</script>

</body>

</html>

该TableGrid 暂时不支持：

1、暂时不支持表格跨行跨列

2、暂时不支持表格冻结列

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航