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

【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函数的方法全部内容了,希望大家多多支持我们~

时间: 2016-10-14

js基本算法:冒泡排序,二分查找的简单实例

知识扩充: 时间复杂度:算法的时间复杂度是一个函数,描述了算法的运行时间.时间复杂度越低,效率越高. 自我理解:一个算法,运行了几次时间复杂度就为多少,如运行了n次,则时间复杂度为O(n). 1.冒泡排序 解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.第一轮的时候最后一个元素应该是最大的一个. 3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较. function sort(elements){ for(var i

javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

本文实例讲述了javascript数组对象常用api函数.分享给大家供大家参考,具体如下: 1. concat() 连接两个或多个数组,并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a); //[1,2,3] console.log(b); //[1,2,3,6,7] 2. join(str) 把数组的所有元素用str分隔,默认逗号分隔 var a = [1,2,3] var b = a.join('|'); console.

JavaScript 冒泡排序和选择排序的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所述: var array = [1,2,3,4,5]; // ---> 服务 //效率 ---> 针对一个有序的数组 效率最高 //标志 true false for(var j = 0; j < array.length - 1;j++ ){ //- j 每次排序完成之后 后面减少比较的次数 var isTrue = true; //如果数组本身就是升序,则直接输出 for(var i = 0; i < array.length -

AngularJS 过滤与排序详解及实例代码

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query

JavaScript算法系列之快速排序(Quicksort)算法实例详解

"快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元素,都移到"基准"的左边:所有大于"基准"的元素,都移到"基准"的右边. (3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止. 举例来说,现在有一个数据集{85, 24, 63, 45,

js利用appendChild对&lt;li&gt;标签进行排序的实现方法

按照从大到小排序 appendChild: 假设父级a中已经有子节点b,那么a.appendChild(b)的作用是:1.先将子节点b从父级a中删除:2.再将子节点b添加到a中,放在最末尾. <body> <button id="bt1">提交</button> <ul id="ul1"> <li>32</li> <li>243</li> <li>43<

JS中数组重排序方法

1.数组中已存在两个可直接用来重排序的方法:reverse()和sort(). reverse()和sort()方法的返回值是经过排序后的数组.reverse()方法会反转数组项的顺序: var values=[1,2,3,4,5]; values.reverse(); alert(values); //5,4,3,2,1 在默认情况下,sort()方法按升序排列数组,sort()方法会调用每个数组项的toString()转型方法,然后比较得到字符串,确定如何排序.即使数组中的每一项都是数值,s

基于javascript实现的快速排序

function quickSort(arr){ //如果数组只有一个数,就直接返回: if(arr.length<1){ return arr; } //找到中间的那个数的索引值:如果是浮点数,就向下取整 var centerIndex = Math.floor(arr.length/2); //根据这个中间的数的索引值,找到这个数的值: var centerNum = arr.splice(centerIndex,1); //存放左边的数 var arrLeft = []; //存放右边的数

JavaScript实现链表插入排序和链表归并排序

本篇文章详细的介绍了JavaScript实现链表插入排序和链表归并排序,链表的归并排序就是对每个部分都进行归并排序,然后合并在一起. 1.链表 1.1链表的存储表示 //链表的存储表示 typedef int ElemType; typedef struct LNode { ElemType data; struct LNode *next; }LNode, *LinkList; 1.2基本操作 创建链表: /* * 创建链表. * 形参num为链表的长度,函数返回链表的头指针. */ Link

JavaScript排序算法动画演示效果的实现方法

之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程.   感觉这个问题还挺有意思 .前些时间就来写了一个.这里记录一下实现过程. 基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来. 问题一:如何将JavaScript排序的一步步进程展现出来? 我试过的几种思路: 1.让JavaScript暂停下来,慢下来. JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来. 排序的每一个循环都让它停

python&nbsp;manim实现排序算法动画示例

目录 什么是 manim 冒泡排序介绍 算法步骤 初始化元素 代码说明 元素交换动画 实现代码 什么是 manim Manim 是一个用于精确编程动画的引擎,专为创建解释性数学视频而设计. 注意,有两个主要版本的 manim.该存储库最初是 3Blue1Brown 的作者的个人项目,目的是为这些视频制作动画,此处提供了视频专用代码.2020 年,一群开发人员将其分叉成现在的社区版,目标是更稳定.更好地测试.更快地响应社区贡献,以及更友好地开始使用. 主要版本如下: 3b1b/manim [最新版

PHP排序算法之冒泡排序(Bubble Sort)实现方法详解

本文实例讲述了PHP排序算法之冒泡排序(Bubble Sort)实现方法.分享给大家供大家参考,具体如下: 基本思想: 冒泡排序是一种交换排序,它的基本思想是:两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止. 最简单排序实现: 我们先来看看在没有学习各种排序方法前经常使用的排序方法(至少我是这样....): //这里使用了类型提示(type hint) array,不熟悉或者不习惯的同学大可去掉,不影响运算结果 function MySort(array &$arr){ $le

JavaScript+CSS无限极分类效果完整实现方法

本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

JavaScript排序算法之希尔排序的2个实例

插入排序在对几乎已经排好序的数据操作时, 效率高, 即可以达到线性排序的效率.但插入排序一般来说是低效的, 因为插入排序每次只能将数据移动一位.希尔排序按其设计者希尔(Donald Shell)的名字命名,该算法由1959年公布.一些老版本教科书和参考手册把该算法命名为Shell-Metzner,即包含Marlene Metzner Norton的名字,但是根据Metzner本人的说法,"我没有为这种算法做任何事,我的名字不应该出现在算法的名字中." 希尔排序基本思想:先取一个小于n的

Javascript排序算法之合并排序(归并排序)的2个例子

归并排序(Merge sort)是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用. 归并(Merge)排序法是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的.然后再把有序子序列合并为整体有序序列. 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个

Javascript排序算法之计数排序的实例

计数排序(Counting sort)是一种稳定的排序算法.计数排序使用一个额外的数组Count_arr,其中第i个元素是待排序数组Arr中值等于i的元素的个数.然后根据数组Count_arr来将Arr中的元素排到正确的位置.分为四个步骤:1.找出待排序的数组中最大和最小的元素2.统计数组中每个值为i的元素出现的次数,存入数组Count_arr的第i项3.对所有的计数累加(从Count_arr中的第一个元素开始,每一项和前一项相加)4.反向遍历原数组:将每个元素i放在新数组的第Count_arr

用javascript来实现动画导航效果的代码

谁在用这些导航 google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干! 原理 小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没-语文很重要啊!!) 准备 我们需

JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】

本文实例讲述了JavaScript数据结构与算法之基本排序算法定义与效率比较.分享给大家供大家参考,具体如下: javascript数据结构与算法--基本排序算法(冒泡.选择.排序)及效率比较 一.数组测试平台 javascript数据结构与算法--基本排序(封装基本数组的操作),封装常规数组操作的函数,比如:插入新数据,显示数组数据,还有交换数组元素等操作来调用不同的排序算法 function CArray(numElements) { this.dataStore = []; this.po

JavaScript选择排序算法原理与实现方法示例

本文实例讲述了JavaScript选择排序算法原理与实现方法.分享给大家供大家参考,具体如下: 一.选择排序简介 冒泡排序.插入排序.选择排序合称为简单排序.下面是选择排序的思想: 假设有一个数组a,我们想象成有一个班级名叫a班,现在全班随意排成一排,排头的位置是a[0],排尾的位置是a[a.length-1].但高矮顺序不是有序的,我们想从矮到高排,排头最矮,排尾最高. 选择排序是这样工作的: 第一轮: (1)a[1]位置队员与a[0]位置队员比较,如果比a[0]位置队员矮,就把a[1]的位置