原生js多選框選中排序及刪除

著了迷發表於2018-10-30
JS排序

1.介紹

最近開發OR辦公系統的時候有在申請流程中做一個新增稽核人的後端功能模組,審批人的流程是按照你選擇的審批人順序進行審批的,這個部分也應該讓選擇的人知道他選擇的審批人順序流程,假如我只是單純的進行獲取所有checked的值,那麼我並不能確認他選中的順序,也就沒辦法來處理稽核的流程.**

2.實現思路

設定一個用來存放已經選定的多選框的value的陣列,自定義一個名名字,便利所有型別為checkbox的input框,獲取對應的value的值,在使用js中indexoff()函式在checkedArray中定位,不返回-1說明已經被選中,講返回值+1後填入之前寫好的span標籤內.**

3.程式碼實現

1.先定義一個空陣列

 var sortFactorsArray=[];
複製程式碼

2再定義一個監聽函式用來獲取所有的input,一個獲取兄弟節點函式,一個做刪除節點操作呼叫函式

 //事件監聽
    function addEvent(obj,event,fn){
        if(obj.attachEvent){
            obj.attachEvent('on'+event,fn);
        }else{
            obj.addEventListener(event,fn,false);
        }
    }
    
    //getElementById() 方法可返回對擁有指定 ID 的第一個物件的引用。
    
     function $(id) {
        return document.getElementById(id);
    }
   
    //獲取兄弟節點
    function getSibling(node){
        var n=node.nextSibling;
        while(n&&n.nodeType!=1){
            n=n.nextSibling;
        }
        return n;
    }
    
     //從陣列刪除指定值元素
    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    }

    //事件監聽
    function addEvent(obj,event,fn){
        if(obj.attachEvent){
            obj.attachEvent('on'+event,fn);
        }else{
            obj.addEventListener(event,fn,false);
        }
    }
  
複製程式碼

3.執行監聽時間,獲取當前的所有input元素,接下來的var tar=event.target||event.srcElement,這句程式碼的意思是彈出你當前操作的物件,通俗的說就是你點選哪個彈出哪個的物件資訊,剩下的程式碼大部分打了備註,所以就不做解釋了

  addEvent($('sortFactors'),'click',function (event) {
        var sortFactorsInput=$('sortFactors').getElementsByTagName('input');
        var tar=event.target||event.srcElement;
        //解決label標籤 觸發兩次點選事件的bug
        if(tar.nodeName.toLowerCase()=='label'){
            return;
        }
        for(var i=0;i<sortFactorsInput.length;i++){
            sortFactorsInput[i].removeAttribute('disabled');
        }
        // console.log(tar.nodeName.toLowerCase());return false;
        if(tar.nodeName.toLowerCase()=='input'){
            //同時滿足已選擇項為三個並且此次點選的為之前未選擇項條件時再把為選的多選項設定為禁用
            if(sortFactorsArray.length>=3&&tar.checked==true){
                alert('您已經選擇了3項！')
                tar.checked=false;//設定此次選擇無效
                for(var i=0;i<sortFactorsInput.length;i++){
                    if(sortFactorsInput[i].checked==false){
                        sortFactorsInput[i].setAttribute('disabled','');
                    }
                }
            }else{
                if(tar.checked==true){
                    sortFactorsArray.push(tar.value);//已選擇項push進陣列
                }else if(tar.checked==false){
                    sortFactorsArray.removeByValue(tar.value);//選擇後又刪除的項也從陣列中移除
                    getSibling(tar).innerHTML='';
                }else{
                }
            }
        }else{
        }
        
        //實時新增序號
        for(var i=0;i<sortFactorsInput.length;i++){
            var loca=sortFactorsArray.indexOf(sortFactorsInput[i].value);
            if(loca!=-1){
                var orderSpan=getSibling(sortFactorsInput[i]);
                orderSpan.innerHTML=(loca+1);
            }
        }

    })
複製程式碼

4.最後來檢視下結果執行

這裡我們選擇順序是Fred Xu2,Fred Xu3,Fred Xu1,可以看到他的順序是正確的

原生js多選框選中排序及刪除

現在我們吧Fred Xu2的選框去除,可以看到,Fred Xu3變成了1,Fred Xu2變成了2,說明我們的實驗正確

原生js多選框選中排序及刪除

總結

下一步要做的就是吧資料新增給伺服器端,做處理了.,作為一個後端開發想我有必要好好學習js了,當然了以上功能只是js的皮毛,這點功能還是從別人那裡學過來的嘻嘻嘻

本文轉載自https://blog.csdn.net/sinat_27088253/article/details/56278493,感謝這位老哥

相關文章