Copy codeThe Code is as follows:
<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 = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
</Head>
<Body>
<Div id = "gannt_left">
<Div id = "left-scroll-panel" class = "scroll-panel">
<Table id = "gannt_grid">
<Thead>
<Tr>
<Th width = "30"> NO. </th>
<Th width = "35"> operation </th>
<Th> title </th>
<Th width = "80"> executor </th>
<Th width = "80"> Start time </th>
<Th width = "80"> end time </th>
<Th width = "30"> days </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> 1 </td>
<Td> edit </td>
<Td> task title: Aspen! </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: Aspen! </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: Aspen! </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: Aspen! </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: Aspen! </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, which can also be encapsulated into a 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 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 = keys (e.tar get). 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>