#7431 一对N小组滚动事件的优化

    //添加滚动事件
        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();
        }
    }
})();