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

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

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

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

1. <table class="table table-bordered"> 
2. {include file="news/cateajaxpage"} 
3. </table> 

其中cateajaxpage.html的内容为：

1. <thead> 
2.   <tr> 
3.     <th>ID</th> 
4.     <th>分类名称</th> 
5.     <th>排序</th> 
6.     <th>操作</th> 
7.   </tr> 
8. </thead> 
9. <tbody> 
10.   {volist name="news" id="vo"} 
11.   <tr> 
12.     <td>{$vo.id}</td> 
13.     <td>{$vo.name}</td> 
14.     <td><input type="text" value="{$vo.order}" name="{$vo.id}"></td> 
15.     <td> 
16.       <div class="btn-group open"> 
17.         <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span> 
18.         </button> 
19.         <ul class="dropdown-menu"> 
20.           <li><a href="{:url('admin/news/cateadd',array('id'=>$vo.id))}" rel="external nofollow" >添加子分类</a> 
21.           </li> 
22.           <li><a href="{:url('admin/news/cateupd',array('id'=>$vo.id))}" rel="external nofollow" >修改</a> 
23.           </li> 
24.           <li><a href="javascript：if(confirm('确认删除？')) location='{:url('admin/news/del',array('id'=>$vo.id))}'" rel="external nofollow" >删除</a> 
25.           </li> 
26.         </ul> 
27.       </div> 
28.     </td> 
29.   </tr> 
30.   {volist name="$vo.children" id="vo1"} 
31.   <tr> 
32.     <td>{$vo1.id}</td> 
33.     <td>|————{$vo1.name}</td> 
34.     <td><input type="text" value="{$vo1.order}" name="{$vo1.id}"></td> 
35.     <td> 
36.       <div class="btn-group open"> 
37.         <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span> 
38.         </button> 
39.         <ul class="dropdown-menu"> 
40.           <li><a href="{:url('admin/news/cateupd',array('id'=>$vo1.id))}" rel="external nofollow" >修改</a> 
41.           </li> 
42.           <li><a href="javascript：if(confirm('确认删除？')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'" rel="external nofollow" >删除</a> 
43.           </li> 
44.         </ul> 
45.       </div> 
46.     </td> 
47.   </tr> 
48.   {/volist} 
49.   {/volist} 
50. </tbody> 

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

<input type="text" value="{$vo.order}" name="{$vo.id}"></td>

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

回到cate.html，写Ajax：

1. $("#changeOrder").click(function(event) { 
2.     /* Act on the event */ 
3.     var json = {}; 
4.     $("input").not('#top-search').each(function(index, el) { 
5.       json[$(this).attr('name')] = $(this).val(); 
6.     }); 
7.     $.ajax({ 
8.       url: '{:url("admin/news/cate")}', 
9.       type: 'post', 
10.       data: json 
11.     }) 
12.     .done(function(data) { 
13.       $(".table-bordered").html(data); 
14.       $(document).click(); 
15.     }) 
16.   }); 

其中changeOrder是我们为排序按钮添加的id值，我们把每一组id、order都放进json变量当中，传递给控制器。

控制器代码：

1. public function cate() 
2.   { 
3.     $news_model = model("Newsfenlei"); 
4.     if (request()->isAjax()) { 
5.       $post = input('post.'); 
6.       foreach ($post as $key => $value) { 
7.         db("newsfenlei")->where('id',$key)->update(['order'=>$value]); 
8.       } 
9.       $list = db("newsfenlei")->order('order desc')->select(); 
10.       $news = $news_model->getNews($list); 
11.       $this->assign("news",$news); 
12.       return view('cateajaxpage'); 
13.     } else { 
14.       $list = db("newsfenlei")->order('order desc')->select(); 
15.       $news = $news_model->getNews($list); 
16.       $this->assign("news",$news); 
17.       return view(); 
18.     } 
19.   } 

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

Tags: tp5无刷新排序 Ajax无刷新排序

分享到：