本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能。分享给大家供大家参考，具体如下：
在后台管理的时候我们有时需要对数据进行排序，以控制数据在模板显示的顺序，排序的原理就是修改数据库，然后更新视图。我们可以单独写一个方法来实现排序的功能，成功后刷新页面，也可以利用Ajax技术，实现数据的局部请求，也就是无刷新排序的功能。
现在想要达到的效果是在排序的input框中输入数值，点击排序实现无刷新排序的功能。
首先是表格（cate.html）这一块我们要单独摘出来，放入到一个单独页面当中，方便我们数据的请求。
<table class="table table-bordered">
{include file="news/cateajaxpage"}
</table>
其中cateajaxpage.html的内容为：
<thead>
<tr>
<th>ID</th>
<th>分类名称</th>
<th>排序</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name="news" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.name}</td>
<td><input type="text" value="{$vo.order}" name="{$vo.id}"></td>
<td>
<div class="btn-group open">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="{:url('admin/news/cateadd',array('id'=>$vo.id))}" rel="external nofollow" >添加子分类</a>
</li>
<li><a href="{:url('admin/news/cateupd',array('id'=>$vo.id))}" rel="external nofollow" >修改</a>
</li>
<li><a href="javascript:if(confirm('确认删除？')) location='{:url('admin/news/del',array('id'=>$vo.id))}'" rel="external nofollow" >删除</a>
</li>
</ul>
</div>
</td>
</tr>
{volist name="$vo.children" id="vo1"}
<tr>
<td>{$vo1.id}</td>
<td>|————{$vo1.name}</td>
<td><input type="text" value="{$vo1.order}" name="{$vo1.id}"></td>
<td>
<div class="btn-group open">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="{:url('admin/news/cateupd',array('id'=>$vo1.id))}" rel="external nofollow" >修改</a>
</li>
<li><a href="javascript:if(confirm('确认删除？')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'" rel="external nofollow" >删除</a>
</li>
</ul>
</div>
</td>
</tr>
{/volist}
{/volist}
</tbody>
内容版权声明：除非注明，否则皆为本站原创文章。