一个可拖拽列宽表格实例演示

网络编程 2024/11/16 佚名

3 2 1

复制代码代码如下:
<DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
font:12px/1.5 Tahoma;
}
#gannt_left{
width:500px;
}
#left-scroll-panel{
width:520px;
height:100px;
overflow-y: auto;
}
table{
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0px;
text-align:center;
width:500px;
}
table,th,td{
border:1px solid #afe0ea;
}
th,td{
height:20px;
line-height:20px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
word-break:keep-all;
}
th{
background:#adf5ff;
}
td{
background:#f6fcff;
}
#gannt_grid,#gannt_grid td{
border-top:0px none;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery.min.js"></head>
<body>
<div id="gannt_left">
<div id="left-scroll-panel" class="scroll-panel">
<table id="gannt_grid">
<thead>
<tr>
<th width="30">序号</th>
<th width="35">操作</th>
<th>标题</th>
<th width="80">执行人</th>
<th width="80">开始时间</th>
<th width="80">结束时间</th>
<th width="30">天数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>编辑</td>
<td>任务标题：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>2</td>
<td>编辑</td>
<td>任务标题：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>编辑</td>
<td>任务标题：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>4</td>
<td>编辑</td>
<td>任务标题：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>5</td>
<td>编辑</td>
<td>任务标题：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
(function(){ //fixed table header ，还可以封装一下做成类
var leftScrollPanel = $("#left-scroll-panel");
var ganntBody = $("#gannt_grid>tbody");
var fixedThead = leftScrollPanel.prev(".fixed-header-tb");
if(!fixedThead.length){
fixedThead = $('<table class="fixed-header-tb"></table>');
fixedThead.append(ganntBody.prev());
leftScrollPanel.before(fixedThead);
}else{
//do not create table head again when gannt body repaint,
//because it is not created in function render
ganntBody.prev().remove();
}
var tds = ganntBody.find("tr:first>td");
var ths = fixedThead.find("th");
var thWidth;
$.each(tds,function(index,td){
//jq width() or css('width') may has 1px disparity, use attr width
thWidth = ths.eq(index).attr("width");
(thWidth!=undefined) && $(td).attr("width",thWidth);
});
})();
(function(){//table header resize
var sideOffset = {
left:null,
right:null,
td:null,
tdLocked:null,
tdLeft:null,
tdRight:null
};
var pos = {
resizedTime:0,
beginPos:0
};
var tableHead = $(".fixed-header-tb").find("tr:first");
var headCellTagName = "th";
var bodyHead = $("#gannt_grid>tbody").find("tr:first");
var minInterVal = 0;
var minWidth = 30;
var borderBeside = 5;
var notResizeCells = [0,1,6];
var freeCells = [2];
var forceSize = false;
var resizeAllow = false;
var resizing = false;
var forbiddenResize = function(){
var frag = false;
var o = sideOffset;
var index = o.td.index();
if($.inArray(index,notResizeCells)>-1){
frag = true;
}else if((index==0||$.inArray(index-1,notResizeCells)>-1)&&o.left<=borderBeside){
frag = true;
}else if((index==o.td.siblings().length||$.inArray(index+1,notResizeCells)>-1)&&o.right<=borderBeside){
frag = true;
}else if(o.left>borderBeside&&o.right>borderBeside){
frag = true;
}
return frag;
};
var stopResize = function(){
if(!resizing){return ;}
resizing = false;
resizeAllow = false;
sideOffset = {
left:null,
right:null,
td:null,
tdLocked:null,
tdLeft:null,
tdRight:null
};
};
var isFreeCell = function(td){
return forceSize==false && $.inArray(td.index(),freeCells)!=-1;
};
tableHead.bind({
mousemove:function(e){
var th = $(e.target).closest(headCellTagName);
if(!th.length){
return;
}
if(!resizing){
sideOffset.td = th;
sideOffset.left = e.pageX - th.offset().left;
sideOffset.right = th.width()-(e.pageX-th.offset().left);
if(forbiddenResize()){
resizeAllow = false;
sideOffset.td.css("cursor","default");
}else{
resizeAllow = true;
sideOffset.td.css("cursor","e-resize");
pos.resizedTime = new Date()*1;
pos.beginPos = e.pageX;
}
return;
}
if(sideOffset.tdLocked){
th = sideOffset.tdLocked;
}
if(new Date()-pos.resizedTime<minInterVal){
return;
}else{
pos.resizedTime = new Date()*1;
}
var offset = (e.pageX-pos.beginPos);
if(!offset){
return;
}else{
pos.beginPos = e.pageX;
}
var leftWidth = sideOffset.tdLeft.width();
var rightWidth = sideOffset.tdRight.width();
if(offset<0&&leftWidth==minWidth){
return;
}else if(offset>0&&rightWidth==minWidth){
return;
}
var fixedLWidth,fixedRWidth;
if(leftWidth-Math.abs(offset)<minWidth&&offset<0){
fixedLWidth = minWidth;
fixedRWidth = rightWidth - (minWidth-leftWidth);
}else if(rightWidth-offset<minWidth&&offset>0){
fixedRWidth = minWidth;
fixedLWidth = leftWidth - (minWidth-rightWidth);
}else{
fixedLWidth = leftWidth+offset;
fixedRWidth = rightWidth-offset;
}
var adjustCells = [
{cell:sideOffset.tdLeft,width:fixedLWidth},
{cell:sideOffset.tdRight,width:fixedRWidth}
];
if(offset<0){
adjustCells = adjustCells.reverse();
}
var inOneTable = bodyHead.parents("table:first").get(0)==tableHead.parents("table:first").get(0);
$.each(adjustCells,function(i,cellConf){
if(isFreeCell(cellConf.cell)){return;}
cellConf.cell.attr("width",cellConf.width);
if(!inOneTable){
bodyHead.children().eq(cellConf.cell.index()).attr("width",cellConf.width);
}
});
},
mousedown:function(){
if(!resizeAllow){
return;
}
sideOffset.tdLocked = sideOffset.td;
if(sideOffset.left<=5){
sideOffset.tdRight = sideOffset.td;
sideOffset.tdLeft = sideOffset.td.prev();
}else{
sideOffset.tdRight = sideOffset.td.next();
sideOffset.tdLeft = sideOffset.td;
}
resizing = true;
return false;
}
});
$(document).bind("mouseup",stopResize);
})();
</script>
</body>
</html>

拖拽,调整列宽

标签：

拖拽,调整列宽

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“一个可拖拽列宽表格实例演示”

一个可拖拽列宽表格实例演示

暂无“一个可拖拽列宽表格实例演示”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

一个可拖拽列宽表格实例演示

拖拽,调整列宽

jquery validate poshytip 自定义样式

JS编程小常识很有用

评论“一个可拖拽列宽表格实例演示”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

一个可拖拽列宽表格实例演示

拖拽,调整列宽

jquery validate poshytip 自定义样式

JS编程小常识很有用

评论“一个可拖拽列宽表格实例演示”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存