<doctype html>
<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= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<body>
<div id= "Gannt_left" >
<div id= "Left-scroll-panel" class= "Scroll-panel" >
<table id= "Gannt_grid" >
<thead>
<tr>
<th width= > Serial number </th>
<th width= > Operation </th>
<th> title </th>
<th width= > Executive </th>
<th width= > Start time </th>
<th width= > End Time </th>
<th width= > Days </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Edit </td>
<td> Task title: Azkar It's everybody. </td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>2</td>
<td> Edit </td>
<td> Task title: Azkar It's everybody. </td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td> Edit </td>
<td> Task title: Azkar It's everybody. </td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>4</td>
<td> Edit </td>
<td> Task title: Azkar It's everybody. </td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>5</td>
<td> Edit </td>
<td> Task title: Azkar It's everybody. </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, you can also encapsulate the class
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 don't create table head again when gannt the body repaint,
Because it is isn't 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 ') 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>
