Resizable table columns

Rajagopal Mani

Ranch Hand

Posts: 84

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

How to develop html table with resizable columns as like ms excel sheet. Please find the sample code for table with resizable column below. But the behaviour of resize is not that much elegant. can anybody share any link or ideas to achieve as like ms excel sheet resizable column.

<html>
<head>
<title>Table Column Resize</title>
<script language="javascript">
function ResizeWidget(id)
{
this.dragMode=false;
this.obj="";
this.apply(id);
}
ResizeWidget.prototype.apply = function(id)
{
var target = document.getElementById(id);
if(!target){
alert("No target");
return;
}
var body=document.getElementsByTagName('body')[0];
this.attachEvent(body,'mousemove',
function(e){ResizeWidget.prototype.startMoving(e)} );
this.attachEvent(body,'mouseup',
function(e){ResizeWidget.prototype.stopMoving(e)}) ;
var tag = target.tagName.toLowerCase();
switch(tag)
{
case "table":
var row = target.getElementsByTagName('tr')[0];
var cols = row.getElementsByTagName('td');
if(!cols || cols.length==0) cols = row.getElementsByTagName('th');
for(var i=0;i<cols.length;i++)
{
this.attachEvent(cols[i], 'mouseover',
function(e){ResizeWidget.prototype.onMouseOver(e)} );
this.attachEvent(cols[i], 'mousedown',
function(e){ResizeWidget.prototype.onMouseDown(e)} );
this.attachEvent(cols[i], 'mouseup',
function(e){ResizeWidget.prototype.onMouseUp(e)}); 
}
break;
default:
alert("ResizeWidget does not support "+target.tagName);
}
}

ResizeWidget.prototype.toDragMode = function(what)
{
this.dragMode=true;
this.obj=what;
}

ResizeWidget.prototype.startMoving = function(e)
{
if(!this.dragMode) return false;
this.obj.style.width=(e.clientX-20) + 'px';
}

ResizeWidget.prototype.stopMoving = function()
{
this.dragMode=false;
this.obj="";
}
ResizeWidget.prototype.onMouseOver = function(e)
{
var o = this.getEventTarget(e);
o.style.cursor='e-resize';
}
ResizeWidget.prototype.onMouseDown = function(e)
{
var o = this.getEventTarget(e);
this.toDragMode(o);
}
ResizeWidget.prototype.onMouseUp = function(e)
{
var o = this.getEventTarget(e);
this.stopMoving(o);
}
ResizeWidget.prototype.attachEvent = function(object, event, handler){
if(window.addEventListener){ // Mozilla, Netscape, Firefox
object.addEventListener(event, handler, false);
} else { // IE
object.attachEvent('on'+event, handler);
}
}
ResizeWidget.prototype.getEventTarget = function(evt)
{
return evt["srcElement"] ? evt["srcElement"] : evt["target"];
}
</script>
</head>

<body>
<h1>Click-and-drag on header cells to resize column widths</h1>
<table id="table2" border="1">
<tr>
<th>click-and-drag to resize</th>
<th>click-and-drag to resize</th>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>Dolor</td>
<td>Sit amet</td>
</tr>
</table>
<p>
<a href="#" onclick="history.go()">Resume sizes</a>
</p>
<script language="JavaScript" type="text/JavaScript">
var resizer = new ResizeWidget("table2");
</script>
</body>
</html>

Rajagopal Mani

Ranch Hand

Posts: 84

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I am trying to use jQuery flexigrid plugin to achieve the above post. I could able to display the flexigrid table. But struggling to populate dynamic data thru json with struts1.2. I did not get proper solution for flexigrid with sturts. It would be greatful if anyone can share related link for flexigrid + sturts1.2

I need to achieve below requirements with table in struts1.2,

[1] Resizable table columns(as like ms excel column)
[2] Column sorting

If any better suggestion than jQuery flexigrid would be greatly appreciated.

Thanks

Rajagopal Mani

Ranch Hand

Posts: 84

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

can anybody reply in this topic regard?