Moving rows in a table

[wmc]

I need to convert a desktop app to the web and would appreciate input
from web developers who have created anything similar, or could point me
to some resources on the web (I haven't worked on web apps for several
years and feel kind of out of touch with all the latest stuff going on...)

A simplified version of What I need to convert is the following... I
have a grid with data in a window which holds a list of rules. The rules
are added from another data control. The rules are order dependent and
so I need to use a toolbar that contains first/up/down/last and changes
the position of the selected rows and the row numbers. There are never a
lot of rows, 20 to 30 would be a lot in this app.

My question is, what's the best way do something on the client-side that
will refresh the view. E.g. say I have 5 rules which are contained in an
html table or an xml file if I have a ui that looks like this.

__________________________________________________

1 Rule_foo foo_attrib...
2 Rule_bar bar-attrib...
3 Rule_one one-attrib...
4 Rule_two two_attrib...
5 Rule_tre tre-attrib

Move First | Move Up | Move Down | Move Last

__________________________________________________




Is there a good way to avoid a brute force, server redraws everything
approach.

Thanks...

williamc

 

[Evertjan.]

wmc wrote on 27 dec 2005 in comp.lang.javascript:

__________________________________________________

1 Rule_foo foo_attrib...
2 Rule_bar bar-attrib...
3 Rule_one one-attrib...
4 Rule_two two_attrib...
5 Rule_tre tre-attrib

Move First | Move Up | Move Down | Move Last

__________________________________________________

<table>
<tr onclick='thisrow(this)'><td>1 -------------
<tr onclick='thisrow(this)'><td>2 -------------
<tr onclick='thisrow(this)'><td>3 -------------
<tr onclick='thisrow(this)'><td>4 -------------
<tr onclick='thisrow(this)'><td>5 -------------
</table>

<script type='text/javascript'>
var whichrow=false

function thisrow(x){
if (whichrow) whichrow.style.backgroundColor='transparent'
whichrow = x
whichrow.style.backgroundColor='yellow'
}
</script>


<button onclick='if (whichrow)
whichrow.parentNode.insertBefore(whichrow,
whichrow.previousSibling)
else alert("First select a row, please!")'>
Move Up</button>

<button onclick='if (whichrow)
whichrow.parentNode.insertBefore(whichrow,
whichrow.parentNode.firstChild)
else alert("First select a row, please!")'>
Move First</button>

ie6 tested.

The Move up rotates, I don't know why!

 

[Evertjan.]

Evertjan. wrote on 27 dec 2005 in comp.lang.javascript:

wmc wrote on 27 dec 2005 in comp.lang.javascript:


<table>

more complete:

<table>
<tr onclick='thisrow(this)'><td>1 -------------
<tr onclick='thisrow(this)'><td>2 -------------
<tr onclick='thisrow(this)'><td>3 -------------
<tr onclick='thisrow(this)'><td>4 -------------
<tr onclick='thisrow(this)'><td>5 -------------
</table>

<br>
<button onclick='moverow("up")'>Move Up</button>
<button onclick='moverow("down")'>Move Down</button>
<button onclick='moverow("first")'>Move First</button>
<button onclick='moverow("last")'>Move Last</button>



<script type='text/javascript'>
var whichrow=false

function thisrow(x){
if (whichrow) whichrow.style.backgroundColor='transparent'
whichrow = x
whichrow.style.backgroundColor='yellow'
}

function moverow(x){
if (whichrow) {
if (x=='up'&&whichrow.previousSibling)
whichrow.parentNode.insertBefore(whichrow,
whichrow.previousSibling);
else if (x=='down'&&whichrow.nextSibling)
whichrow.parentNode.insertBefore(whichrow.nextSibling,
whichrow);
else if (x=='first')
whichrow.parentNode.insertBefore(whichrow,
whichrow.parentNode.firstChild);
else if (x=='last')
whichrow.parentNode.insertBefore(whichrow,null);
} else
alert("First select a row, please!");
}
</script>

 

[wmc]

Thanks,I'll give that a try!

--wmc