tp5框架基于Ajax实现列表无刷新排序功能示例
本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能。分享给大家供大家参考,具体如下:
在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图。我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能。
现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能。
首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便我们数据的请求。
{includefile="news/cateajaxpage"}
其中cateajaxpage.html的内容为:
{volistname="news"id="vo"} ID 分类名称 排序 操作 {volistname="$vo.children"id="vo1"} {$vo.id} {$vo.name} 操作 $vo.id))}"rel="externalnofollow">添加子分类 $vo.id))}"rel="externalnofollow">修改 $vo.id))}'"rel="externalnofollow">删除 {/volist} {/volist} {$vo1.id} |————{$vo1.name} 操作 $vo1.id))}"rel="externalnofollow">修改 $vo1.id))}'"rel="externalnofollow">删除
这里因为使用了无限级分类得到多维数组的技术,所以会有两个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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。