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

时间:2022-09-24 19:53:02

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

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

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

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

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

其中cateajaxpage.html的内容为:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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,如果你不太懂无限级分类的话可以分配过来一个普通的数据过来,重点是:

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

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

回到cate.html,写Ajax:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#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变量当中,传递给控制器。

控制器代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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框架的PHP程序设计有所帮助。

原文链接:https://blog.csdn.net/pan_yuyuan/article/details/81879669