相思资源网 Design By www.200059.com
复制代码 代码如下:
<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>
<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>
标签：
拖拽,调整列宽
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无一个可拖拽列宽表格实例演示的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？