浅谈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操作 input type=checkbox的实现代码
Jun 14 Javascript
json原理分析及实例介绍
Nov 29 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
Angular 路由route实例代码
Jul 12 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
详解vue项目打包步骤
Mar 29 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 Array交叉表实现代码
2010/08/05 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python和go语言的区别是什么
2020/07/20 Python
python如何运行js语句
2020/09/09 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
公务员保密承诺书
2014/03/27 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
公司仓库管理制度
2015/08/04 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技