双击锁定，单击排序的js实现

旧城等待， 2024-02-17 16:57 63阅读 0赞

**使用方法见最后的demo**

var CC = {};
    
    (function() {
        
        var cSort = function() {
        
            this.sortList = {};
            this.clickTaskId;
    
            this.curTask = 0; // 1 click, 2 dblclick
    
            this.sortFunc = function(){
        };
            this.curOrder = 1;
        };
    
        var Field = function(field, order) {
        
            this.field = field;
            this.sort = 0; // 0 asc, 1 desc
            this.order = order;
            this.lock = 0; // 0 unlock, 1 lock
            this.sortImg = "";
            this.lockImg = "";
        };
    
        cSort.prototype = {
            sortImg : [],
            lockImg : [],
            delay : 500,
            click : function(field, str) {
        
                var sort = this;
                if ("db" == str) {
                    sort.dbclick(field);
                } else {
                    sort.clickTaskId = setTimeout(function() {
        
                        // 有正在执行的排序
                        if(sort.curTask != 0)
                            return;
    
                        var o = sort.sortList[field];
                        // lock状态
                        if(o.lock == 1)
                            return;
    
                        sort.curTask = 1;
                        o.sort = 1 - o.sort;
                        //o.lockImg = cSort.sortImg[o.sort];
                        sort.sortFunc();
                        o.order = sort.curOrder ++;
                        sort.curTask = 0;
    
                    }, cSort.delay);
                }
            },
    
            dbclick : function(field) {
        
                var sort = this;
                if(sort.curTask != 0)
                    return;
    
                clearTimeout(sort.clickTaskId);
                sort.curTask = 2;
                var o = sort.sortList[field];
                o.lock = 1 - o.lock;
            //  o.lockImg = cSort.lockImg[o.lock];
                // 执行排序
                sort.sortFunc();
                o.order = sort.curOrder ++;
                sort.curTask = 0;
            },
    
            add : function(field, order) {
        
                var obj = new Field(field, order);
                this.sortList[field] = obj;
                return this;
            },
    
            addDone : function() {
        
                for(key in this.sortList) {
                    this.curOrder ++;
                }
            },
    
            setSortFunc : function(func) {
        
                this.sortFunc = func;
            },
    
            getSortResult : function() {
        
                var list = this.sortList;
                var result = "";
                var lastMax = 999999;
                var temp;
                var temp2;
                // 遍历list.length的次数，每次取出剩余中order最大的
                for(key in list) {
                    // 初始化order为最小值
                    temp = new Field("-1", "-1");
                    // 依次和list中的元素比较，如果list中的元素的order值小于lastMax（上一次取出的最大值），则赋给temp
                    for(key2 in list) {
                        temp2 = list[key2].order;
                        if(temp2 < lastMax && temp2 > temp.order)
                            temp = list[key2];
                    }
                    // temp是剩余中order最大的元素
                    lastMax = temp.order;
                    // 设置返回的字符串格式
                    result += temp.field + "," + temp.order + "," + temp.lock + ";";
                }
                return result;
            }
        }
    
        // ba yin yong gei wai bu bian liang
        CC.initSort = function(v) {
        
            return new cSort();
        }
    
    })();
    
    function cprint(info) {
        
        console.log(info);
    }
    
    function demo() {
        
        //<a id="11" onclick="CSORT.click('11')" ondblclick="CSORT.click('11', 'db')">11</a>
        var CSORT = CC.initSort(); 
        CSORT.add("11", 1).add("22", 2).add("33", 3).addDone();
        CSORT.setSortFunc(function(){
        });
    
        CSORT.getSortResult(); // 格式：field,order,lock;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关 STM32使用HAL库实现按键的单击、双击、长按

STM32使用HAL库实现按键的单击、双击、长按目录 STM32使用HAL库实现按键的单击、双击、长按前言具体思路

爱被打了一巴掌/ 2022年12月08日 14:10/ 0 赞/ 278 阅读

相关为TListView实现项目单击/双击

[Delphi's][Delphi_s] TListView control displays a list of items in columns with column h

古城微笑少年丶/ 2022年12月06日 15:46/ 0 赞/ 196 阅读

相关实现 tabBar 单击切换初始化，双击进行页面数据刷新

实现 tabBar 单击切换初始化，双击进行页面数据刷新参考一位大佬的文章我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方

叁歲伎倆/ 2022年11月19日 07:45/ 0 赞/ 373 阅读

相关 js实现单击事件和双击事件

一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("test).on('click',functi

雨点打透心脏的1/2处/ 2022年11月14日 10:16/ 0 赞/ 194 阅读

相关 jQuery 单击编辑双击编辑保存

<mce:script language="javascript" type="text/javascript"><!-- jQuery(docum

淩亂°似流年/ 2022年07月12日 13:41/ 0 赞/ 183 阅读

相关微信小程序实现同时单击、双击、长按

要实现小程序的单击和长按事件比较简单，直接绑定微信提供的单击和长按事件就可以了，但是要一个组件同时支持单击和长按的操作，而这两个事件又不冲突就需要做一些额外的工作了。因为微信提

妖狐艹你老母/ 2022年05月22日 00:09/ 0 赞/ 565 阅读

相关浅谈js实现双击事件：

浅谈js实现双击事件： <input name="btn_test" id="btn_test" type="button" value="测试"> <scr

淡淡的烟草味﹌/ 2022年03月14日 09:48/ 0 赞/ 801 阅读

相关 uni-app双击事件（单击、双击互不干扰）

uni-app中绑定双击事件 > 功能需求在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。

╰+哭是因爲堅強的太久メ/ 2021年10月06日 18:52/ 0 赞/ 1315 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 415 阅读

相关 js鼠标单击和双击事件冲突问题的解决方法

情况一，如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发生双击事件时，第一次点击（click）会触发一次单击（

亦凉/ 2021年06月24日 14:00/ 0 赞/ 639 阅读