baoshi-was/resources/js/queryForm/header.js

/**
 * 需在页面定义三个元素 tr的元素当作当前元素 id 自定义 默认header
 * tr的父级元素 table id默认为tr的id加Parent后缀
 * 浮动表格元素 table id默认为tr的id加Roll后缀
 * */

window.sort=require('../utilities/sort');
window.Header = function getHeader(object) {
    this.object = object;
    this._header = object.el || '#header';
    this._column = object.column;
    this._data = object.data;
    this._restorationColumn = object.restorationColumn;
    this._fixedTop = object.fixedTop || 0;
    this._offset = object.offset || 0;

    let _this = this;
    let _parentNode = $(_this._header);
    let sortType = {};
    let columnArr = [];
    // form fixed
    let _headerParent = $(_this._header+"Parent");
    let _parentNodeTemp = _parentNode.clone();
    function fixed() {
        let _parentNode_top = _parentNode.offset().top;
        let height = _parentNode.height();
        _parentNodeTemp.css('position',"fixed");
        _parentNodeTemp.css('top',_this._fixedTop+"px");
        _parentNodeTemp.css('z-index',"1030");
        _parentNodeTemp.css('width',_headerParent.width()+"px");
        _parentNodeTemp.height(height);
        _parentNodeTemp.attr('id',_this._header+"Temp");
        $(_this._header+"Roll").append(_parentNodeTemp);
        $(window).scroll(function(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > _parentNode_top-_this._fixedTop) {
                $(_this._header+"Roll").removeClass('d-none');
            } else {
                $(_this._header+"Roll").addClass('d-none');
            }
            let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            if (scrollLeft > 0){
                _parentNodeTemp.css('margin-left',0-(scrollLeft));
            }else{
                _parentNodeTemp.css('margin-left',"");
            }
        });
    }

    /**
     * column :{customization : null || bool   --是否自定义
     *          dom : null || element           --自定义元素
     *          style :  null || string         --样式
     *          name : null || string           --字段名,英文
     *          value : string                  --列名
     *          neglect : null || bool          --是否忽略排序
     *         }
     * */
    let rule=function (column,column_sort,column_sort_temp) {
        if (!sortType[column.name]){
            sortType[column.name] = 'asc';
            columnArr.push(column.name);
            column_sort.removeClass('fa-sort').addClass('fa-sort-asc');
            column_sort_temp.removeClass('fa-sort').addClass('fa-sort-asc');
            let columnArrTemp = [];
            columnArrTemp.push.apply(columnArrTemp,columnArr);
            window.sort.sort(_this._data,columnArrTemp,sortType);
            return ;
        }
        if (sortType[column.name] === 'asc'){
            sortType[column.name] = 'desc';
            column_sort.removeClass('fa-sort-asc').addClass('fa-sort-desc');
            column_sort_temp.removeClass('fa-sort-asc').addClass('fa-sort-desc');
            let columnArrTemp = [];
            columnArrTemp.push.apply(columnArrTemp,columnArr);
            window.sort.sort(_this._data,columnArrTemp,sortType);
            return ;
        }
        if (sortType[column.name] === 'desc'){
            delete sortType[column.name];
            columnArr.some(function (name, index) {
                if (name === column.name){
                    columnArr.splice(index,1);
                    return true;
                }
            });
            column_sort.removeClass('fa-sort-desc').addClass('fa-sort');
            column_sort_temp.removeClass('fa-sort-desc').addClass('fa-sort');
            if (columnArr.length === 0){
                //希尔排序
                let arr = [];
                arr.push.apply(arr,_this._data);
                let len = arr.length;
                for(let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
                    for(let i = gap; i < len; i++) {
                        let j = i;
                        let current = arr[i];
                        while(j - gap >= 0 && current[_this._restorationColumn] < arr[j - gap][_this._restorationColumn]) {
                            arr[j] = arr[j - gap];
                            j = j - gap;
                        }
                        arr[j] = current;
                    }
                }
                //插入排序
                /*let preIndex, current;
                for(let i = 1; i < len; i++) {
                    preIndex = i - 1;
                    current = arr[i];
                    while(preIndex >= 0 && arr[preIndex][_this._restorationColumn] > current[_this._restorationColumn]) {
                        arr[preIndex + 1] = arr[preIndex];
                        preIndex--;
                    }
                    arr[preIndex + 1] = current;
                }*/
                _this._data.length = 0;
                _this._data.push.apply(_this._data,arr);
                return;
            }
            let columnArrTemp = [];
            columnArrTemp.push.apply(columnArrTemp,columnArr);
            window.sort.sort(_this._data,columnArrTemp,sortType);
        }
    };
    function append() {
        _this._column.forEach(function (column) {
            if (column.customization){
                _parentNode.append(column.dom);
            }else{
                let _td = "<th id='dom_"+column.name+"' style='";
                if(!column.neglect){
                    _td += "cursor: pointer;"
                }
                if (column.style) _td += column.style;
                _td += "'>";
                _td += "<span style='display: inline-block'>";
                if(!column.neglect){
                    _td += "<span id='sort_"+column.name+"' class='fa fa-sort'></span>";
                }
                _td += column.value+"</span>";
                _td += "</th>";
                _parentNode.append(_td);
                let column_dom = $('#dom_'+column.name);
                if (!column.neglect){
                    let column_sort = $('#sort_'+column.name);
                    let column_sort_temp = $('#sort_'+column.name+"_temp");
                    column_dom.on('click',rule(column,column_sort,column_sort_temp));
                }
            }
        });
    }
    function cloneDom(){
        _this._column.forEach(function (column) {
            let column_dom = $('#dom_'+column.name);
            let column_dom_temp = column_dom.clone();
            let columnNameDom = column_dom_temp.children()[0];
            if (!column.neglect){
                $(column_dom_temp.children()[0]).children()[0].id = 'sort_'+column.name+"_temp";
            }
            column_dom_temp.attr('id','dom_'+column.name+"_temp");
            $(columnNameDom).css('width',column_dom.width()+_this._offset);
            _parentNodeTemp.append(column_dom_temp);
            if (!column.neglect){
                let column_sort = $('#sort_'+column.name);
                let column_sort_temp = $('#sort_'+column.name+"_temp");
                column_dom_temp.on('click',rule(column,column_sort,column_sort_temp));
            }
        });
    }

    this.init = function() {
        append();
        fixed();
        cloneDom();
    }
};