这期内容当中小编将会给大家带来有关怎么在tp5框架中利用Ajax实现列表无刷新排序功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
首先是表格（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>这里因为使用了无限级分类得到多维数组的技术，所以会有两个volist，如果你不太懂无限级分类的话可以分配过来一个普通的数据过来，重点是：
<input type="text" value="{$vo.order}" name="{$vo.id}"></td>这句在显示排序值得同时，为每一个input框设置了一个name值，这个值就是分类的id值，通过这种方式，可以为列表当中的所有input框进行区分，且能通过数据库获取到对应的分类。
回到cate.html，写Ajax：
$("#changeOrder").click(function(event) {
/* Act on the event */
var json = {};
$("input").not('#top-search').each(function(index, el) {
json[$(this).attr('name')] = $(this).val();
});
$.ajax({
url: '{:url("admin/news/cate")}',
type: 'post',
data: json
})
.done(function(data) {
$(".table-bordered").html(data);
$(document).click();
})
});其中changeOrder是我们为排序按钮添加的id值，我们把每一组id、order都放进json变量当中，传递给控制器。
控制器代码：
public function cate()
{
$news_model = model("Newsfenlei");
if (request()->isAjax()) {
$post = input('post.');
foreach ($post as $key => $value) {
db("newsfenlei")->where('id',$key)->update(['order'=>$value]);
}
$list = db("newsfenlei")->order('order desc')->select();
$news = $news_model->getNews($list);
$this->assign("news",$news);
return view('cateajaxpage');
} else {
$list = db("newsfenlei")->order('order desc')->select();
$news = $news_model->getNews($list);
$this->assign("news",$news);
return view();
}
}上述就是小编为大家分享的怎么在tp5框架中利用Ajax实现列表无刷新排序功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
