浅谈js控制li标签排序问题 js调用php函数的方法


Posted in Javascript onOctober 16, 2016

【Html代码】

<span style="font-size:14px;"><ul class="list-group"> 
   <? if ($categorys): ?>         
  <? foreach ($categorys as $category):?> 
    <li class="list-group-item" data-id="<? echo $category->id ?>"> 
      <? echo $category->name?> 
        <a href="<? echo site_url('group/category/delete?id=' . $category->id) ?>" onclick="<?echo lang('confirm')?>"> 
            <span class="glyphicon glyphicon-remove"></span></a> 
        </li>   
    <? endforeach;?>         
   <? else: ?> 
  <div class="alert alert-danger">暂时没有设置</div> 
   <? endif; ?> 
</ul></span>

【js代码】

<span style="font-size:14px;">   <script> 
      require(["jquery","jqueryui"],function($) { 
        var d = window.top.dialog({ 
          content: '配置已更新' 
        }); 
        $(function() { 
          $( ".list-group").sortable({ 
            stop: function( event, ui ) { 
              data = ''; 
              $('li.list-group-item').each(function (){ 
                data += ',' + $(this).attr('data-id'); 
              }); 
              $.post('/group/category/listorder',{data:data}); 
              d.show(); 
              setTimeout(function () { 
                d.close(); 
              }, 1000); 
            } 
          }).disableSelection(); 
        }); 
      }); 
    </script></span>

【php代码】

<span style="font-size:14px;">public function listorder() { 
    $data = explode(',', $this->input->post('data')); 
    $i = 1; 
    foreach ($data as $id) { 
      if (!$id) 
        continue; 
      $this->category_model->save($id, array( 
        'listorder' => $i, 
      )); 
      $i++; 
    } 
  } 
 
  public function delete() { 
    $id = $this->input->get('id'); 
    $this->category_model->delete($id); 
    messagebox(lang('success'), 'referer'); 
  }</span>

浅谈js控制li标签排序问题 js调用php函数的方法

以上就是小编为大家带来的浅谈js控制li标签排序问题 js调用php函数的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JQuery中操作Css样式的方法
Feb 12 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
js实现显示手机号码效果
Mar 09 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
vue v-model的用法解析
Oct 19 Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
Vue.js快速入门实例教程
Oct 15 #Javascript
JavaScript随机生成颜色的方法
Oct 15 #Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
js控制div层的叠加简单方法
Oct 15 #Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 #Javascript
js控制li的隐藏和显示实例代码
Oct 15 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
javaScript语法总结
2016/11/25 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
原生js封装添加class,删除class的实例
2017/11/06 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Python实现的检测网站挂马程序
2014/11/30 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
do you have any Best Practice for testing
2016/06/04 面试题
给全校老师的建议书
2014/03/13 职场文书
三项教育活动实施方案
2014/03/30 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
普宁寺导游词
2015/02/04 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书