PHP+Ajax实现后台文章快速排序

 

在后台我们经常遇到文章排序功能，今天我们就在表格里面加个排序字段，实现实时排序功能。

也就是文章按照由小到大的顺序排序。

 

wKioL1XIOMGDHxTcAAGKNVcGS1c100.jpg



文章列表

<tablewidth="100%" cellspacing="0" cellpadding="0"border="0"> 
    <tbody> 
        <tr>
            <td>
用户名</td> 
            <td>内容</td> 
            <tdwidth="120px">排序</td> 
        </tr> 
        <?php 
        $sql = "SELECT name,content,id,ord FROM wishing_wall ORDER BY ord ASC limit 0,10 "; 
        $query = mysql_query($sql); 
        while ($row =mysql_fetch_array($query)) { 
            ?> 
 
            <tr> 
               <td><ahref='http://www.sucaihuo.com/php/389.html' target='_blank'><?php echo$row['name']; ?></td> 
               <td><?php echo $row['content']; ?></td> 
               <td><a οnclick="changeOrd($(this),'<?php echo $row['id']; ?>')"><?php echo $row['ord'];?></a></td> 
           </tr>    
        <?php } ?> 
    </tbody> 
</table>


点击排序出现输入框，和确认方法

function changeOrd(obj, id) { 
    var val = obj.text(); 
    var c = obj.parent("td"); 
    obj.parent("td").html("<input type='text'style='width:50px;' onFocus=this.select() οnblur=changeOrdConfirm($(this)," + id + ") value='" + val +"' />"); 
    c.children("input").focus(); 
} 
function changeOrdConfirm(obj, id) { 
    var ord = obj.val(); 
    $.post("ajax.php", { 
        id: id, 
        ord: ord 
    }, 
    function(data) { 
       obj.parent("td").html("<a οnclick=changeOrd($(this)," +id + ")>" + obj.val() + "</a>"); 
    }) 
}

ajax远程操作排序字段

include_once("connect.php"); 
 
$id = isset($_POST['id']) ? intval($_POST['id']) : 0; 
$ord = isset($_POST['ord']) ? intval($_POST['ord']) : 0; 
if ($id > 0) { 
    $sql = "UPDATE `wishing_wall` SET `ord` ='".$ord."' WHERE `id` = '" . $id . "';"; 
     mysql_query($sql); 
}