本文例項講述了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程式設計有所幫助。