чтобы ждать было не скучно привожу (правда не свой, а только слегка модифицированный мной) скрипт, позволяющий менять местами строки в таблице.
Оригинал js можно посмотреть по адресу
http://surfmind.com/lab/table_reorder.cfm, но на изменения стоит тоже обратить внимание
Итак, имеем комплексную задачу - хочу дать, ну, скажем, админу, - возможность модифицировать порядок показа элементов в каком-то списке (все равно в каком - товаров в магазине, форумов на главной странице форумов и т.д.
делаем раз 1)
- пример для mysql
PHP код:
ALTER TABLE some_table ADD order_id INT( 11 ) DEFAULT '0' NOT NULL;
- для postgresql
PHP код:
ALTER TABLE some_table ADD order_id INT4 DEFAULT '0' NOT NULL;
(для других СУБД лень - сами напишите
)
делаем два 2) html - форма (реализуется в html-файле, или, скорей всего в шаблоне для php, asp, или на чем мы там пишем
и заполняется динамически)
PHP код:
<html>
<head>
<script language="JavaScript" type="text/javascript" src="/js/table_order.js"></script>
</head>
<body onload="rebuild()">
<form>
<table>
<tr>
<th></th><th></th><th></th><th></th><th>Name</th>
</tr>
<tr id="node1" taskid="1" position="1" origposition="1">
<td>
<input type="hidden" name="id_list[]" value="1">
<input type="text" id="text1" name="order" value="" size="2" disabled>
<input type="hidden" id="order1" name="order[1]" value="">
</td>
<td>
<span onclick="moveDown(this.parentNode.parentNode);">
<img src="t_files/icon_down_12px" height="12" hspace="4" width="12">
</span>
</td>
<td></td>
<td>Текст нумер раз</td>
</tr>
<tr id="node2" taskid="2" position="2" origposition="2">
<td>
<input type="hidden" name="id_list[]" value="2">
<input type="text" id="text2" name="order" value="" size="2" disabled>
<input type="hidden" id="order1" name="order[2]" value="">
</td>
<td>
<span onclick="moveDown(this.parentNode.parentNode);">
<img src="t_files/icon_down_12px" height="12" hspace="4" width="12">
</span>
</td>
<td>
<span onclick="moveUp(this.parentNode.parentNode)">
<img src="t_files/icon_up_12px" height="12" hspace="4" width="12">
</span>
</td>
<td>Вторая строка</td>
</tr>
<!-- и так далее -->
<tr>
<th colspan="4"><input type="submit" name="action" value="Order"></th>
</tr>
</table>
</form>
</body>
</html>
(вроде, главное показала)
3) JavaScript (/js/table_order.js):
PHP код:
var prevNode;
function moveUp(node) {
var newNode = node.cloneNode("true");
newNode.setAttribute("position", (newNode.getAttribute("position") - 1));
var prevRow = node_before(node);
var prevRowNode = prevRow.cloneNode("true");
prevRowNode.setAttribute("position", (parseInt(prevRowNode.getAttribute("position")) + 1.0));
var tableNode = node.parentNode;
var reattachee = tableNode.replaceChild( newNode, prevRow);
var reattachee = tableNode.replaceChild(prevRowNode, node);
rebuild();
}
function moveDown(node) {
var newNode = node.cloneNode("true");
newNode.setAttribute("position", (parseInt(newNode.getAttribute("position")) + 1.0));
var nextRow = node_after(node);
var nextRowNode = nextRow.cloneNode("true");
nextRowNode.setAttribute("position", (nextRowNode.getAttribute("position") - 1));
var tableNode = node.parentNode;
var reattachee = tableNode.replaceChild( newNode, nextRow);
var reattachee = tableNode.replaceChild(nextRowNode, node);
rebuild();
}
function rebuild() {
var count =0;
var movedown = "<span onclick='moveDown(this.parentNode.parentNode);'> <img src='/img/down.gif' width='12' height='12' hspace='4'></span>";
var moveup = "<span onclick='moveUp(this.parentNode.parentNode)'> <img src='/img/up.gif' width='12' height='12' hspace='4'></span>";
var thenode;
var prevbutton;
var tasks = document.getElementsByTagName("TR");
var id_name;
for(var i=0; i<tasks.length;i++) {
thenode = tasks.item(i);
if(thenode.getAttribute("position")) {
// для доступа к id будем использовать count - тогда работа будет идти только с теми строками, у которых есть атрибут position
count++;
idName = 'text' + count; // input type="text"
orName = 'order' + count; // input type="hidden"
var posnode = document.getElementById(idName);
var ornode = document.getElementById(orName);
var newpos = thenode.getAttribute("position");
posnode.value = newpos; // changing field value
ornode.value = newpos; // changing field value
//alert (idName); // проверяем
//alert(newpos); // проверяем
downbutton = node_after(first_child(thenode));
upbutton = node_after(downbutton);
if(count == 1) {
upbutton.innerHTML=""; // - для первой строки стрелочки-обработчика up.gif не будет
} else {
upbutton.innerHTML = moveup;
}
downbutton.innerHTML = movedown;
}
if (i==(tasks.length-1))downbutton.innerHTML=""; // - для последней строки стрелочки-обработчика down.gif не будет
}
}
ну и наконец php 4)
PHP код:
function set_order() {
$order = 0;
foreach ($_POST['id_list'] as $id) {
$order++;
/*
дальше вызваем кто во что горазд -
у меня, например класс-контроллер,
работающий с соответственным объектом базы данных
и функция, делающая там update,
завернутая в обработчик ошибок
(а можно через try-catch)
*/
}
return true;
}
Примечание - для совместимости с Mozilla, нужно подклюить еще библиотеку
DOM whitespace.
Совсем забыла - из php в базу данных передается переменная цикла $order - которая и опрежеляет получившийся порядок элементов в списке
