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 相关文章推荐
php基础知识:类与对象(1)
Dec 13 PHP
PHP获取网卡地址的代码
Apr 09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
Dec 29 PHP
简单的php写入数据库类代码分享
Jul 26 PHP
php explode函数实例代码
Feb 27 PHP
php学习笔记之面向对象编程
Dec 29 PHP
PHP中HTML标签过滤技巧
Jan 07 PHP
php实现smarty模板无限极分类的方法
Dec 07 PHP
ThinkPHP的SAE开发相关注意事项详解
Oct 09 PHP
关于php 高并发解决的一点思路
Apr 16 PHP
php基于SQLite实现的分页功能示例
Jun 21 PHP
利用php获得flv视频长度的实例代码
Oct 26 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP 断点续传实例详解
2017/11/11 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
nodeJS微信分享
2017/12/20 NodeJs
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python zip()函数使用方法解析
2019/10/31 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
运动会入场词200字
2014/02/15 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
服装设计师求职信
2014/06/04 职场文书
小学课外活动总结
2014/07/09 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2016新年致辞
2015/08/01 职场文书
节水宣传标语口号
2015/12/26 职场文书