I downloaded dragtable widget here: http://www.danvk.org/wp/dragtable
I am using only the headers as a kind of column configuration tool for CSV file import configurations.
I need to figure out how to move a column when the images are clicked. I need the right arrow to move a column to the right and the left arrow to move a column to the left. I have working code but I don't know how to pass the dragtable's table property to the movecolumn function.
Here is my HTML:
<html>
<head>
<title>Untitled</title>
<script src="js/dragtable.js"></script>
<script language="JavaScript">
function moveright(item){
var draggable = document.getElementById("listformat");
dragtable.moveColumn(draggable.table, item.parentNode.id, item.parentNode.id+1);
}
</script>
<style type="text/css">
th {
/* width: 100px; */
background-color:#0000C0;
color:#FFF;
border: 1px solid #0000C0;
font-size: .7em;
}
</style>
</head>
<body>
<table class="draggable" width="100%" border="0" cellspacing="2" cellpadding="3" id="listformat">
<th id="1"> Part Number <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="2"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Alt P/N# or NSN P/N# <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="3"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Condition Code <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="4"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Quantity <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="5"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Description <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="6"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Other Column <img src="images/Next.gif" onclick="moveright(this);" width="14" height="13" alt="" border="0"></th>
<th id="7"><img src="images/Previous.gif" width="14" height="13" alt="" border="0"> Other Column </th>
</table>
</body>
</html>
Here is the modifications to the dragtable source that I made to store the values like I need them:
// Store a column swap in a cookie for posterity.
rememberDrag: function(id, a, b, table) {
var cookieName = "dragtable-" + id;
var new_val = "";
//************************************************************
// This gets the id's of each column to store in the cookie in
// this format: 1|2|3|4|5 etc so it can be split.
//
// Needed so I can determine column order for different process.
//
// Stores the value after each move, does NOT store column swaps
// like the original code.
//************************************************************
forEach(table.firstElementChild.rows[0].childNodes, function(cell) {
if (cell.id > -1) {
new_val += cell.id + '|';
}
});
new_val = new_val.trim();
new_val = new_val.substr(0, new_val.length-1);
dragtable.eraseCookie(cookieName);
dragtable.createCookie(cookieName, new_val, dragtable.cookieDays);
},
//************************************************************
// Replay all column swaps for a table.
// Modified so it doesn't replay the swaps but moves the
// columns back to the position stored in the cookie.
//************************************************************
replayDrags: function(table) {
if (!dragtable.cookiesEnabled()) return;
var dragstr = dragtable.readCookie("dragtable-" + table.id);
if (!dragstr) return;
var pair = dragstr.split("|");
var a;
for(i=0; i<=6; i++) {
a = parseInt(pair[i])-1;
dragtable.moveColumn(table, i, a);
}
},
