//添加滾動事件
        studentGrid.on(‘scroll‘,function(){
            var sT = $(this)[0].scrollTop,
                sH = $(this)[0].scrollHeight,
                h =$(this).height();

            //滾動到底部了 加載下一頁
            if((sT+h)>=sH){
                pageCurGroupMember(pageCache,curScrollPage+1);
            }
        })
 

數組filter方法對數組元素進行過濾
2018年03月19日 10:12:46
閱讀數：448
Array.prototype.filter
對數組中元素進行過濾

/**
 * @method reduce
 * @param {number}   item   當前叠代的數組元素
 * @param {number}   index  當前叠代的數組元素下下標
 * @param {array}    array  原數組
 */
  let arr = [1,2,6,3,4,5];
  let res = arr.filter(function(item,index,array){
      
 
//元素值，元素的索引，原數組。
      return (item>3);
  });
  console.log(res);//[6, 4, 5]
filter 方法可以將數組中不符合的元素去掉，返回一個新數組。

(function(){
    var hrefSrc = "function/modals/oneOnNGroupStudentModal.html",
        curGroupId = Util.getModalParameter(hrefSrc, ‘groupId‘),
        blCampusId = Util.getModalParameter(hrefSrc, ‘
 
blCampusId‘),
        modal = $(‘#oneOnNGroupStudentModal‘),
        studentGrid = modal.find(‘#studentGrid‘),
        chosenStudent = modal.find(‘#chosenStudent‘),
        groupName = modal.find(‘#groupName‘),
        title = modal.find(‘#title‘),
        frm = modal.find(‘#frm‘),
        noChosenStudentTips = modal.find(‘#noChosenStudentTips‘).clone(),
        groupInfoForm = modal.find(‘#groupInfoForm‘),
        studyManagerPost = modal.find(‘#studyManagerPost‘),
        saveGroupBlCampusId = modal.find(‘#blCampusId‘),//保存小組的校區
        searchBtn = modal.find(‘#searchBtn‘);
    var curChooseListData = [],//已選學員列表
        modGroupName = true,//默認選完學員小組名也變
        userId = Index.currentLoginUser.userId,
        students = Util.getModalParameter(hrefSrc, "data"),
        pageCache = {},
        curScrollPage = 0;
       
    initEvent();
    initData();

    //刷新已選學員列表
    function refreshChosenList() {
        chosenStudent.html(template(‘template-chosenStudent‘, { items: curChooseListData }));
        if (curChooseListData.length === 0) {
            chosenStudent.html(noChosenStudentTips);
        }
        if (modGroupName) {
            groupName.val(curChooseListData.map(function (item) {
                return item.name
            }).join(‘、‘).substring(0,20));
        }
        Util.datepicker(chosenStudent.find(‘.firstCourseDateInput‘),{buttonPaneClass:‘noCloseBtn‘}); //統一初始化時間選擇框
        pageSetUp(chosenStudent);
    }
    //modal列表數據分頁處理
    function pageCurGroupMember(pageCache,page){
        var showData = [];
        pageCache = pageCache || [];
        page = page || 1;
        curScrollPage = page ;
        showData = pageCache.filter(function(item,i){
            return (i>=(page-1)*20 && i<page*20)
        });
        var noItemTips = ‘<div id="noMemberItems" class="normal-gray">暫無數據，請重新查詢！</div>‘;
        if(pageCache.length === 0 &&  page===1){
          studentGrid.html($(noItemTips));
          return;
        }
        var dom = showData.length>0 ?  $(template(‘template-studentGrid‘,{ items:showData})):‘‘;
        page===1? studentGrid.html(dom):studentGrid.append(dom);
        if(showData.length === 0) return;
        dom.filter(‘.item‘).each(function (i) {
            $(this).data(‘data‘, showData[i]);
        })
        //修改的時候選中已改數據
        $(curChooseListData).each(function (i, item) {
            studentGrid.find(‘div.item[data-id="‘ + item.id + ‘"] i.check-ico‘).addClass(‘fa-check-circle‘).removeClass(‘fa-circle-thin‘);
        })
        pageSetUp(studentGrid);
    }
    function initEvent() {

        //查詢學員
        searchBtn.click(function () {
            var params = Util.tranFormVarToJson(frm);
            params.blCampusId = blCampusId;//查詢帶上參數
            $.get(Api.listStudentsForChoose, params, function (res) {
                pageCache = res.rows;
                pageCurGroupMember(pageCache);
            })
        })

        //左側列表選中/取消
        studentGrid.on(‘click‘, ‘div.item‘, function () {
            var item = $(this),
                ico = item.find(‘i.check-ico‘),
                id = item.attr(‘data-id‘),
                data = item.data(‘data‘);
            if (!data.firstCourseDate) {
                data.firstCourseDate = DateUtil.getCurrentDate();
            }
            //選中
            if (ico.hasClass(‘fa-circle-thin‘)) {
                ico.addClass(‘fa-check-circle‘).removeClass(‘fa-circle-thin‘);
                curChooseListData.push(data);
                refreshChosenList();
            } else {
                chosenStudent.find(‘div.item[data-id="‘ + id + ‘"] i‘).click();
            }
        })
        //添加滾動事件
        studentGrid.on(‘scroll‘,function(){
            var sT = $(this)[0].scrollTop,
                sH = $(this)[0].scrollHeight,
                h =$(this).height();

            //滾動到底部了 加載下一頁
            if((sT+h)>=sH){
                pageCurGroupMember(pageCache,curScrollPage+1);
            }
        })
        //右側列表刪除
        chosenStudent.on(‘click‘, ‘i‘, function () {
            if ($(this).hasClass(‘disabled‘)) return;

            var item = $(this).parents(‘.item:eq(0)‘),
                id = item.attr(‘data-id‘);

            //處理數據
            $(curChooseListData).each(function (i, item) {
                if (item.id == id) {
                    curChooseListData.splice(i, 1);
                }
            });
            refreshChosenList();
            studentGrid.find(‘div.item[data-id="‘ + id + ‘"] i.check-ico‘).removeClass(‘fa-check-circle‘).addClass(‘fa-circle-thin‘);
        })

        //小組名接受輸入後，modGroupName關閉
        groupName.one(‘input‘, function () {
            modGroupName = false;
        })

        //保存
        modal.on(‘click‘, ‘.submit‘, function () {
            //alert(blCampusId);
            var params = {};

            if (curGroupId) {
                params.id = curGroupId;
            } else {
                params = Util.tranFormVarToJson(groupInfoForm);
                if (!params) return;
            }
            //過濾之前學員
            var tmpArr = curChooseListData.filter(function (item) {
                return !item.oriFlag;
            });
            //拼學員id
            params.studentIds = tmpArr.map(function (item) {
                return item.id;
            }).join(‘,‘);
            if (!params.studentIds) {
                Util.showAlert(‘請選擇學員‘,true);
                return false;
            }
            // 首課日期
            var firstCourseDateArray = [];
            $.each(chosenStudent.find(‘.firstCourseDateInput‘), function () {
               var that = $(this),
                   studentId = that.attr(‘data-studentId‘),
                   firstCourseDate = that.val();
                    firstCourseDateArray.push({
                        studentId: studentId,
                        firstCourseDate: firstCourseDate
                    });
            });

            params.firstCourseDate = JSON.stringify(firstCourseDateArray);
            params.blCampusId=blCampusId;

            $.post(Api.quickSaveOneOnNGroup, params, function (res) {
                if (res.resultCode === 0) {
                    Util.showAlert(‘保存成功‘);
                    Util.closeModal(hrefSrc);
                }
            })
        })
    }

    function initData() {
        
        studyManagerPost.attr(‘data-value‘, userId);
        //初始化學管師
        InitUtil.initCampusStudy(modal.find(‘#studyManagerEl‘).add(studyManagerPost));
        //修改和新增不同
        if (curGroupId) {
            //小組信息
            $.get(Api.findOneOnNGroupById, { id: curGroupId }, function (res) {
                Util.fillElmentValueByTag(res.data, ‘data-from‘, null, groupInfoForm);
                groupInfoForm.find(‘select,input‘).prop(‘disabled‘,true).change();
                modGroupName = false;
            });

            //組員信息
            $.get(Api.listStudentsInGroup, { groupId: curGroupId }, function (res) {
                curChooseListData = res.data;
                //舊數據不能刪
                $(curChooseListData).each(function (i, item) {
                    item.oriFlag = true;
                    if (!item.firstCourseDate) item.firstCourseDate = ‘-‘;
                })
                searchBtn.click();
                refreshChosenList();
            });

            title.text(‘添加組員‘);
        } else {
            saveGroupBlCampusId.val(blCampusId).change();
            searchBtn.click();
        }
        // 默認選中 從一對N學員列表跳轉到新建小組的學員
        if (students) {
            curChooseListData = students.slice() ;
            $(curChooseListData).each(function (i, item) {
                if (!item.firstCourseDate) item.firstCourseDate = DateUtil.getCurrentDate();
            });
            refreshChosenList();
        }
    }
})();

#7431 一對N小組滾動事件的優化