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

本文实例讲述了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

这里因为使用了无限级分类得到多维数组的技术，所以会有两个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();
    }
  }

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

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

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