드래그 가능 열 너비 표 실례 설명
<br/><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<br/><style>
<br>body{
<br>font:12px/1.5 Tahoma;
<br>}
<br>#gannt_left{
<br>width:500px;
<br>}
<br>#left-scroll-panel{
<br>width:520px;
<br>height:100px;
<br>overflow-y: auto;
<br>}
<br>table{
<br>table-layout:fixed;
<br>border-collapse: collapse;
<br>border-spacing: 0px;
<br>text-align:center;
<br>width:500px;
<br>}
<br>table,th,td{
<br>border:1px solid #afe0ea;
<br>}
<br>th,td{
<br>height:20px;
<br>line-height:20px;
<br>overflow: hidden;
<br>text-overflow:ellipsis;
<br>white-space:nowrap;
<br>word-wrap:normal;
<br>word-break:keep-all;
<br>}
<br>th{
<br>background:#adf5ff;
<br>}
<br>td{
<br>background:#f6fcff;
<br>}
<br>#gannt_grid,#gannt_grid td{
<br>border-top:0px none;
<br>}
<br></style>
<br/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<br/>
<br/>
<br/><div id="gannt_left">
<br/><div id="left-scroll-panel" class="scroll-panel">
<br/><table id="gannt_grid">
<br/><thead>
<br/><tr>
<br/><th width="30"> </th>
<br/><th width="35"> </th>
<br/><th> </th>
<br/><th width="80"> </th>
<br/><th width="80"> </th>
<br/><th width="80"> </th>
<br/><th width="30"> </th>
<br/></tr>
<br/></thead>
<br/><tbody>
<br/><tr>
<br/><td>1</td>
<br/><td> </td>
<br/><td> ： </td>
<br/><td>Firefox</td>
<br/><td>2012-07-15</td>
<br/><td>2012-08-15</td>
<br/><td>32</td>
<br/></tr>
<br/><tr>
<br/><td>2</td>
<br/><td> </td>
<br/><td> ： </td>
<br/><td>Firefox</td>
<br/><td>2012-07-15</td>
<br/><td>2012-08-15</td>
<br/><td>32</td>
<br/></tr>
<br/><tr>
<br/><td>3</td>
<br/><td> </td>
<br/><td> ： </td>
<br/><td>Firefox</td>
<br/><td>2012-07-15</td>
<br/><td>2012-08-15</td>
<br/><td>32</td>
<br/></tr>
<br/><tr>
<br/><td>4</td>
<br/><td> </td>
<br/><td> ： </td>
<br/><td>Firefox</td>
<br/><td>2012-07-15</td>
<br/><td>2012-08-15</td>
<br/><td>32</td>
<br/></tr>
<br/><tr>
<br/><td>5</td>
<br/><td> </td>
<br/><td> ： </td>
<br/><td>Firefox</td>
<br/><td>2012-07-15</td>
<br/><td>2012-08-15</td>
<br/><td>32</td>
<br/></tr>
<br/></tbody>
<br/></table>
<br/></div>
<br/></div>
<br/><script>
<br>(function(){ //fixed table header ，
<br>var leftScrollPanel = $("#left-scroll-panel");
<br>var ganntBody = $("#gannt_grid>tbody");
<br>var fixedThead = leftScrollPanel.prev(".fixed-header-tb");
<br>if(!fixedThead.length){
<br>fixedThead = $('<table class="fixed-header-tb"></table>');
<br>fixedThead.append(ganntBody.prev());
<br>leftScrollPanel.before(fixedThead);
<br>}else{
<br>//do not create table head again when gannt body repaint,
<br>//because it is not created in function render
<br>ganntBody.prev().remove();
<br>}
<br>var tds = ganntBody.find("tr:first>td");
<br>var ths = fixedThead.find("th");
<br>var thWidth;
<br>$.each(tds,function(index,td){
<br>//jq width() or css('width') may has 1px disparity, use attr width
<br>thWidth = ths.eq(index).attr("width");
<br>(thWidth!=undefined) && $(td).attr("width",thWidth);
<br>});
<br>})();
<br>(function(){//table header resize
<br>var sideOffset = {
<br>left:null,
<br>right:null,
<br>td:null,
<br>tdLocked:null,
<br>tdLeft:null,
<br>tdRight:null
<br>};
<br>var pos = {
<br>resizedTime:0,
<br>beginPos:0
<br>};
<br>var tableHead = $(".fixed-header-tb").find("tr:first");
<br>var headCellTagName = "th";
<br>var bodyHead = $("#gannt_grid>tbody").find("tr:first");
<br>var minInterVal = 0;
<br>var minWidth = 30;
<br>var borderBeside = 5;
<br>var notResizeCells = [0,1,6];
<br>var freeCells = [2];
<br>var forceSize = false;
<br>var resizeAllow = false;
<br>var resizing = false;
<br>var forbiddenResize = function(){
<br>var frag = false;
<br>var o = sideOffset;
<br>var index = o.td.index();
<br>if($.inArray(index,notResizeCells)>-1){
<br>frag = true;
<br>}else if((index==0||$.inArray(index-1,notResizeCells)>-1)&&o.left<=borderBeside){
<br>frag = true;
<br>}else if((index==o.td.siblings().length||$.inArray(index+1,notResizeCells)>-1)&&o.right<=borderBeside){
<br>frag = true;
<br>}else if(o.left>borderBeside&&o.right>borderBeside){
<br>frag = true;
<br>}
<br>return frag;
<br>};
<br>var stopResize = function(){
<br>if(!resizing){return ;}
<br>resizing = false;
<br>resizeAllow = false;
<br>sideOffset = {
<br>left:null,
<br>right:null,
<br>td:null,
<br>tdLocked:null,
<br>tdLeft:null,
<br>tdRight:null
<br>};
<br>};
<br>var isFreeCell = function(td){
<br>return forceSize==false && $.inArray(td.index(),freeCells)!=-1;
<br>};
<br>tableHead.bind({
<br>mousemove:function(e){
<br>var th = $(e.target).closest(headCellTagName);
<br>if(!th.length){
<br>return;
<br>}
<br>if(!resizing){
<br>sideOffset.td = th;
<br>sideOffset.left = e.pageX - th.offset().left;
<br>sideOffset.right = th.width()-(e.pageX-th.offset().left);
<br>if(forbiddenResize()){
<br>resizeAllow = false;
<br>sideOffset.td.css("cursor","default");
<br>}else{
<br>resizeAllow = true;
<br>sideOffset.td.css("cursor","e-resize");
<br>pos.resizedTime = new Date()*1;
<br>pos.beginPos = e.pageX;
<br>}
<br>return;
<br>}
<br>if(sideOffset.tdLocked){
<br>th = sideOffset.tdLocked;
<br>}
<br>if(new Date()-pos.resizedTime<minInterVal){
<br>return;
<br>}else{
<br>pos.resizedTime = new Date()*1;
<br>}
<br>var offset = (e.pageX-pos.beginPos);
<br>if(!offset){
<br>return;
<br>}else{
<br>pos.beginPos = e.pageX;
<br>}
<br>var leftWidth = sideOffset.tdLeft.width();
<br>var rightWidth = sideOffset.tdRight.width();
<br>if(offset<0&&leftWidth==minWidth){
<br>return;
<br>}else if(offset>0&&rightWidth==minWidth){
<br>return;
<br>}
<br>var fixedLWidth,fixedRWidth;
<br>if(leftWidth-Math.abs(offset)<minWidth&&offset<0){
<br>fixedLWidth = minWidth;
<br>fixedRWidth = rightWidth - (minWidth-leftWidth);
<br>}else if(rightWidth-offset<minWidth&&offset>0){
<br>fixedRWidth = minWidth;
<br>fixedLWidth = leftWidth - (minWidth-rightWidth);
<br>}else{
<br>fixedLWidth = leftWidth+offset;
<br>fixedRWidth = rightWidth-offset;
<br>}
<br>var adjustCells = [
<br>{cell:sideOffset.tdLeft,width:fixedLWidth},
<br>{cell:sideOffset.tdRight,width:fixedRWidth}
<br>];
<br>if(offset<0){
<br>adjustCells = adjustCells.reverse();
<br>}
<br>var inOneTable = bodyHead.parents("table:first").get(0)==tableHead.parents("table:first").get(0);
<br>$.each(adjustCells,function(i,cellConf){
<br>if(isFreeCell(cellConf.cell)){return;}
<br>cellConf.cell.attr("width",cellConf.width);
<br>if(!inOneTable){
<br>bodyHead.children().eq(cellConf.cell.index()).attr("width",cellConf.width);
<br>}
<br>});
<br>},
<br>mousedown:function(){
<br>if(!resizeAllow){
<br>return;
<br>}
<br>sideOffset.tdLocked = sideOffset.td;
<br>if(sideOffset.left<=5){
<br>sideOffset.tdRight = sideOffset.td;
<br>sideOffset.tdLeft = sideOffset.td.prev();
<br>}else{
<br>sideOffset.tdRight = sideOffset.td.next();
<br>sideOffset.tdLeft = sideOffset.td;
<br>}
<br>resizing = true;
<br>return false;
<br>}
<br>});
<br>$(document).bind("mouseup",stopResize);
<br>})();
<br></script>
<br/>
<br/>
<br/>
</doctype></code></pre>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
