快捷導(dǎo)航

tp5框架基于Ajax實(shí)現(xiàn)列表無刷新排序功能示例

更新時間：2020年02月10日 09:11:38 作者：pan_yuyuan

這篇文章主要介紹了tp5框架基于Ajax實(shí)現(xiàn)列表無刷新排序功能,結(jié)合實(shí)例形式詳細(xì)分析了thinkPHP5結(jié)合Ajax實(shí)現(xiàn)列表無刷新排序的原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了tp5框架基于Ajax實(shí)現(xiàn)列表無刷新排序功能。分享給大家供大家參考，具體如下：

在后臺管理的時候我們有時需要對數(shù)據(jù)進(jìn)行排序，以控制數(shù)據(jù)在模板顯示的順序，排序的原理就是修改數(shù)據(jù)庫，然后更新視圖。我們可以單獨(dú)寫一個方法來實(shí)現(xiàn)排序的功能，成功后刷新頁面，也可以利用Ajax技術(shù)，實(shí)現(xiàn)數(shù)據(jù)的局部請求，也就是無刷新排序的功能。

現(xiàn)在想要達(dá)到的效果是在排序的input框中輸入數(shù)值，點(diǎn)擊排序?qū)崿F(xiàn)無刷新排序的功能。

首先是表格（cate.html）這一塊我們要單獨(dú)摘出來，放入到一個單獨(dú)頁面當(dāng)中，方便我們數(shù)據(jù)的請求。

<table class="table table-bordered">
{include file="news/cateajaxpage"}
</table>

其中cateajaxpage.html的內(nèi)容為：

  <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('確認(rèn)刪除？')) 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('確認(rèn)刪除？')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'" rel="external nofollow" >刪除</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    {/volist}
    {/volist}
  </tbody>

這里因?yàn)槭褂昧藷o限級分類得到多維數(shù)組的技術(shù)，所以會有兩個volist，如果你不太懂無限級分類的話可以分配過來一個普通的數(shù)據(jù)過來，重點(diǎn)是：

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

這句在顯示排序值得同時，為每一個input框設(shè)置了一個name值，這個值就是分類的id值，通過這種方式，可以為列表當(dāng)中的所有input框進(jìn)行區(qū)分，且能通過數(shù)據(jù)庫獲取到對應(yīng)的分類。

回到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是我們?yōu)榕判虬粹o添加的id值，我們把每一組id、order都放進(jìn)json變量當(dāng)中，傳遞給控制器。

控制器代碼：

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();
    }
  }

因?yàn)樯婕暗綗o限級分類，所以使用了模型層獲取數(shù)據(jù)，getNews方法是獲取到無限級分類后的數(shù)據(jù)，這塊大家可以直接使用數(shù)據(jù)庫獲取數(shù)據(jù)，需要注意的是處理Ajax請求的時候，我們根據(jù)POST信息進(jìn)行數(shù)據(jù)更新，再數(shù)據(jù)更新以后再查詢數(shù)據(jù)庫，將數(shù)據(jù)分配到模板上。

更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。

希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: