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


Posted in PHP onFebruary 10, 2020

本文实例讲述了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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
PHP4 与 MySQL 数据库操作函数详解
Oct 09 PHP
php expects parameter 1 to be resource, array given 错误
Mar 23 PHP
解析php dirname()与__FILE__常量的应用
Jun 24 PHP
PHP中Memcache操作类及用法实例
Dec 12 PHP
php计算两个整数的最大公约数常用算法小结
Mar 05 PHP
PHP中把数据库查询结果输出为json格式简单实例
Apr 09 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
Jul 02 PHP
总结对比php中的多种序列化
Aug 28 PHP
Yii2单元测试用法示例
Nov 12 PHP
搭建自己的PHP MVC框架详解
Aug 16 PHP
PHP基于回溯算法解决n皇后问题的方法示例
Nov 07 PHP
TP5框架实现签到功能的方法分析
Apr 05 PHP
tp5框架使用cookie加密算法实现登录功能示例
Feb 10 #PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
Feb 10 #PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
Feb 07 #PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
Feb 07 #PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 #PHP
php测试kafka项目示例
Feb 06 #PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
Feb 06 #PHP
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PDO实现学生管理系统
2020/03/21 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
javascript实现动态标签云
2015/10/16 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python中下划线的使用方法
2015/03/27 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python 提取文件指定列的方法示例
2019/08/07 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
公司办公室岗位职责
2014/03/19 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
合作协议书模板
2014/10/10 职场文书