tp5利用Ajax实现列表无刷新排序功能
2018-08-21 00:06
393 查看
在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图。我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能。
现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能。
首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便我们数据的请求。
[code]<table class="table table-bordered"> {include file="news/cateajaxpage"} </table>
其中cateajaxpage.html的内容为:
[code] <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))}">添加子分类</a> </li> <li><a href="{:url('admin/news/cateupd',array('id'=>$vo.id))}">修改</a> </li> <li><a href="javascript:if(confirm('确认删除?')) location='{:url('admin/news/del',array('id'=>$vo.id))}'">删除</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))}">修改</a> </li> <li><a href="javascript:if(confirm('确认删除?')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'">删除</a> </li> </ul> </div> </td> </tr> {/volist} {/volist} </tbody>
这里因为使用了无限级分类得到多维数组的技术,所以会有两个volist,如果你不太懂无限级分类的话可以分配过来一个普通的数据过来,重点是:
[code]<input type="text" value="{$vo.order}" name="{$vo.id}"></td>
这句在显示排序值得同时,为每一个input框设置了一个name值,这个值就是分类的id值,通过这种方式,可以为列表当中的所有input框进行区分,且能通过数据库获取到对应的分类。
回到cate.html,写Ajax:
[code] $("#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变量当中,传递给控制器。
控制器代码:
[code]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信息进行数据更新,再数据更新以后再查询数据库,将数据分配到模板上。
阅读更多相关文章推荐
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- struts中利用ajax实现仿google下拉列表自动补全功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用AJAX实现WordPress中的文章列表及评论的分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用AJAX实现WordPress中的文章列表及评论的分页功能
- 利用AJAX与数据岛实现无刷新绑定
- SSH三大框架的整合+利用Ajax实现无刷新分页
- 利用动态加载模板,配合ajax实现无刷新操作
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- Ajax(asp.net)技术实现异步刷新和控件功能示例流程
- iOS功能实现之列表的横向刷新加载
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 静态页中利用AJAX.NET实现无刷新页面
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- laravel博客开发之利用jcorp结合laravel和ajaxupload实现用户头像上传和裁剪功能
- 基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)
- JQuery+Ajax实现数据查询、排序和分页功能
- Android 仿联系人列表 实现ListView的A-Z字母排序和过滤搜索功能