好资源导航 » 文章资讯 » tp5框架基于Ajax实现列表无刷新排序功能示例

tp5框架基于Ajax实现列表无刷新排序功能示例

2023-08-01 21:22:04 83

本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能。分享给大家供大家参考，具体如下：

在后台管理的时候我们有时需要对数据进行排序，以控制数据在模板显示的顺序，排序的原理就是修改数据库，然后更新视图。我们可以单独写一个方法来实现排序的功能，成功后刷新页面，也可以利用Ajax技术，实现数据的局部请求，也就是无刷新排序的功能。

现在想要达到的效果是在排序的input框中输入数值，点击排序实现无刷新排序的功能。

首先是表格（cate.html）这一块我们要单独摘出来，放入到一个单独页面当中，方便我们数据的请求。


{includefile="news/cateajaxpage"}

其中cateajaxpage.html的内容为：



ID
分类名称
排序
操作



{volistname="news"id="vo"}

{$vo.id}
{$vo.name}



操作


$vo.id))}"rel="externalnofollow">添加子分类

$vo.id))}"rel="externalnofollow">修改

$vo.id))}'"rel="externalnofollow">删除

{volistname="$vo.children"id="vo1"} {$vo1.id} |————{$vo1.name}

操作

$vo1.id))}"rel="externalnofollow">修改

$vo1.id))}'"rel="externalnofollow">删除

{/volist} {/volist}

这里因为使用了无限级分类得到多维数组的技术，所以会有两个volist，如果你不太懂无限级分类的话可以分配过来一个普通的数据过来，重点是：

这句在显示排序值得同时，为每一个input框设置了一个name值，这个值就是分类的id值，通过这种方式，可以为列表当中的所有input框进行区分，且能通过数据库获取到对应的分类。

回到cate.html，写Ajax：

$("#changeOrder").click(function(event){
/*Actontheevent*/
varjson={};
$("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变量当中，传递给控制器。

控制器代码：

publicfunctioncate()
{
$news_model=model("Newsfenlei");
if(request()->isAjax()){
$post=input('post.');
foreach($postas$key=>$value){
db("newsfenlei")->where('id',$key)->update(['order'=>$value]);
}
$list=db("newsfenlei")->order('orderdesc')->select();
$news=$news_model->getNews($list);
$this->assign("news",$news);
returnview('cateajaxpage');
}else{
$list=db("newsfenlei")->order('orderdesc')->select();
$news=$news_model->getNews($list);
$this->assign("news",$news);
returnview();
}
}

因为涉及到无限级分类，所以使用了模型层获取数据，getNews方法是获取到无限级分类后的数据，这块大家可以直接使用数据库获取数据，需要注意的是处理Ajax请求的时候，我们根据POST信息进行数据更新，再数据更新以后再查询数据库，将数据分配到模板上。

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《ZendFrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

tp5框架基于Ajax实现列表无刷新排序功能示例

热门推荐

随机推荐