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 setcookie(name, value, expires, path, domain, secure) 参数详解
Jun 28 PHP
php中如何同时使用session和cookie来保存用户登录信息
Jul 05 PHP
php 发送带附件邮件示例
Jan 23 PHP
php自定义session示例分享
Apr 22 PHP
php获取远程文件大小
Oct 20 PHP
php用正则判断是否为数字的方法
Mar 25 PHP
php微信开发之自定义菜单完整流程
Oct 08 PHP
PHP实现上传多文件示例代码
Feb 20 PHP
深入解析PHP中SESSION反序列化机制
Mar 01 PHP
PHP 中TP5 Request 请求对象的实例详解
Jul 31 PHP
php7函数,声明,返回值等新特性介绍
May 25 PHP
thinkphp5修改view到根目录实例方法
Jul 02 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
Vue实现手机计算器
2020/08/17 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
解决Python3下map函数的显示问题
2019/12/04 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
PHP中如何创建和修改数组
2012/05/02 面试题
小学新教师培训方案
2014/02/03 职场文书
武侯祠导游词
2015/02/04 职场文书
小学工作总结2015
2015/05/04 职场文书
早恋主题班会
2015/08/14 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android