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

window.checkData = []; //全选 数据池
window.sort=require('../utilities/sort');//排序组件
window.Header = function getHeader(object) {
    let _targetDom = object.el ? document.getElementById(object.el) : document.getElementsByTagName("table")[0];//基点元素
    let _columns = object.column;   //列名
    let _fixedTop = object.fixedTop || 0;  //同级浮动元素高度，使当前元素追加该元素高度浮动
    let _isCheckAllBox = object.isCheckAllBox || true;//是否开启全选框
    let _data = object.data || [];   //被排序数据
    let _restorationColumn = object.restorationColumn || 'id'; //恢复原数据基准字段
    let _is_restorationColumn_asc = object.is_restorationColumn_asc || false;    //恢复原数据基准字段的排序类型 true:asc false:desc
    let _before = object.before;//前置元素
    let _name = object.name ? object.name+"." : "";//唯一名称 用于区别模块 本地存储

    let sortType = {}; //排序类型
    let columnArr = []; //列数组

    let moveTd = {}; //移动列

    function getTargetChildNode(dom) { //递归获取input子节点
        if (!dom || dom.tagName==='INPUT')return dom;
        return getTargetChildNode(dom.firstElementChild);
    }
    function createHeaderBefore() {//生成前置元素
        let tr = document.createElement("tr");
        _before.forEach(be=>{
            let th = document.createElement("th");
            if (be.colspan)th.colSpan = be.colspan;
            if (be.font){
                let font = document.createElement("span");
                font.className = be.font;
                th.appendChild(font);
            }
            if (be.value)th.appendChild(document.createTextNode(be.value));
            if (be.class)th.className = be.class;
            tr.appendChild(th);
        });
        _targetDom.insertBefore(tr, _targetDom.firstChild);
    }
    function appendFloat(th) {
        th.style.position = "sticky";
        th.style.position = "-webkit-sticky";
        th.style.top = _fixedTop+"px";
        th.style.backgroundColor = "white";
        th.style.zIndex = "999";
    }
    function createHeader() {//生成表头列
        let tr = document.createElement("tr");
        tr.className = "text-center";
        let firstTr = _targetDom.getElementsByTagName("tr")[0];
        let tds = [];
        if (firstTr)tds = firstTr.children;

        if (_isCheckAllBox){//是否开启全选
            let th = document.createElement("th");
            appendFloat(th);
            if (firstTr) th.style.minWidth = tds[0].offsetWidth+"px";
            th.className = "text-left";
            let check = document.createElement("input");
            check.type = "checkbox";
            check.id = "checkAll";
            if (firstTr)bindCheckbox(check);
            th.appendChild(check);
            tr.appendChild(th);
        }

        let i = (_isCheckAllBox && firstTr) ? 1 : 0;
        for (i;i<(tds.length>0 ? tds.length : _columns.length);i++){
            let th = document.createElement("th");
            appendFloat(th);
            let column = _columns[(_isCheckAllBox && firstTr) ? i-1 : i];
            let wid = localStorage.getItem(_name+column.name);
            if (wid){
                let trs = _targetDom.children;
                while(trs[0].tagName !== 'TR')trs = trs[0].children;
                for (let j=0;j<trs.length;j++){
                    trs[j].children[i].style.minWidth = wid+"px";
                }
            }
            if (column){
                if (column.type === 'multi')  multiColumn(th,column);
                else defaultColumn(th,column);
            }
            tr.appendChild(th);
        }
        bindMove(tr);
        if (_targetDom.firstChild) _targetDom.insertBefore(tr, _targetDom.firstChild);
        else _targetDom.appendChild(tr);
    }

    function multiColumn(th,column) { //多列样式的生成
        if (column.title){
            let div = document.createElement("div");
            div.className="w-100 text-center";
            div.appendChild(document.createTextNode(column.title));
            th.appendChild(div);
        }
        let div = document.createElement("div");
        div.className="row text-center";
        if (column.rows){
            column.rows.forEach(row=>{
                let node = document.createElement("div");
                node.className = "col-"+(row.col ? row.col : 1);
                node.appendChild(document.createTextNode(row.value));
                div.appendChild(node);
            });
            th.appendChild(div);
        }
        return th;
    }

    function defaultColumn(th,column) { //默认列样式的生成
        if (column.style)for (let key in column.style)if (column.style.hasOwnProperty(key)) th.style[key] = column.style[key];
        if (column.class)th.className =  column.class;
        let span = document.createElement("span");
        span.style.display = "inline-block";
        if (!column.neglect){
            span.style.cursor = "pointer";
            let font = document.createElement("span");
            font.className = "fa fa-sort";
            span.appendChild(font);
            span.onclick = rule(column,font); //绑定排序事件
        }
        span.appendChild(document.createTextNode((column.value ? column.value : '')));
        th.appendChild(span);
        return th;
    }

    //点击事件触发的排序规则
    function rule(column,columnSort) {
        return function () {
            if (!sortType[column.name]){
                sortType[column.name] = 'asc';
                columnArr.push(column.name);
                columnSort.className = "fa fa-sort-asc";
                let columnArrTemp = [];
                columnArrTemp.push.apply(columnArrTemp,columnArr);
                window.sort.sort(_data,columnArrTemp,sortType);
                return ;
            }
            if (sortType[column.name] === 'asc'){
                sortType[column.name] = 'desc';
                columnSort.className = "fa fa-sort-desc";
                let columnArrTemp = [];
                columnArrTemp.push.apply(columnArrTemp,columnArr);
                window.sort.sort(_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;
                    }
                });
                columnSort.className = "fa fa-sort";
                if (columnArr.length === 0){
                    //希尔排序
                    let arr = [];
                    arr.push.apply(arr,_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];
                            if (_is_restorationColumn_asc){
                                while(j - gap >= 0 && Number(current[_restorationColumn]) < Number(arr[j - gap][_restorationColumn])) {
                                    arr[j] = arr[j - gap];
                                    j = j - gap;
                                }
                            }else{
                                while(j - gap >= 0 && Number(current[_restorationColumn]) > Number(arr[j - gap][_restorationColumn])) {
                                    arr[j] = arr[j - gap];
                                    j = j - gap;
                                }
                            }
                            arr[j] = current;
                        }
                    }
                    _data.length = 0;
                    _data.push.apply(_data,arr);
                    return;
                }
                let columnArrTemp = [];
                columnArrTemp.push.apply(columnArrTemp,columnArr);
                window.sort.sort(_data,columnArrTemp,sortType);
            }
        }
    }
    function bindCheckbox(check) {
        let trs = _targetDom.children;
        while(trs[0].tagName !== 'TR')trs = trs[0].children;
        check.onchange = function () {
            if (event.target.checked){
                for (let i=0;i<trs.length;i++){
                    let checkbox = getTargetChildNode(trs[i].children[0]);
                    if (checkbox && !checkbox.checked){
                        checkData.push(checkbox.value);
                        checkbox.checked = true;
                    }
                }
            }else{
                checkData = [];
                for (let i=0;i<trs.length;i++){
                    let checkbox = getTargetChildNode(trs[i].children[0]);
                    if (checkbox && checkbox.checked)checkbox.checked = false;
                }
            }
        };
        for (let i=0;i<trs.length;i++){
            let checkbox = getTargetChildNode(trs[i].children[0]);
            if (checkbox) checkbox.onchange = function () {
                if (event.target.checked)checkData.push(checkbox.value);
                else checkData.splice(checkData.indexOf(checkbox.value),1);
                if (checkData.length === _data.length && !check.checked)check.checked=true;
                if (checkData.length !== _data.length && check.checked) check.checked=false;
            }
        }
    }
    function bindMove(tr) {
        for (let j=0;j<tr.children.length;j++){ //为首列绑定拖拽列宽事件
            tr.children[j].onmousedown = function (){
                if (j===0 && event.offsetX<10)return;
                if(event.offsetX<10)moveTd = {oldX:event.clientX,dom:tr.children[j-1],index:j-1};
                if (event.offsetX > tr.children[j].offsetWidth-10)moveTd = {oldX:event.clientX,dom:tr.children[j],index:j};
            };
            tr.children[j].onmousemove = function () {
                if (j===0 && event.offsetX<10)return;
                if(event.offsetX<10 || event.offsetX > tr.children[j].offsetWidth-10)
                    this.style.cursor = 'w-resize';
                else this.style.cursor = 'default';
            }
        }
        document.onmouseup = function (){ //全局监听拖拽列宽的发生 作用域设为全局是为了防抖动
            if (moveTd.oldX){
                event.stopPropagation();
                moveTd.dom.style.cursor = 'default';
                moveTd.oldX = undefined;
                setTimeout(function () {
                    let column = _columns[(_isCheckAllBox && _targetDom.firstChild) ? moveTd.index-1 : moveTd.index];
                    if (column) localStorage.setItem(_name+column.name, moveTd.dom.offsetWidth);
                });
            }
        }; //移动时调整表头与表身的列宽
        document.onmousemove = function(){
            if (moveTd.oldX){
                event.stopPropagation();
                let diff = event.clientX-moveTd.oldX;
                let newWidth = moveTd.dom.offsetWidth+diff+"px";
                setTimeout(()=>{
                    let trs = _targetDom.children;
                    if (trs){
                        while(trs[0].tagName !== 'TR')trs = trs[0].children;
                        for (let j=0;j<trs.length;j++){
                            if (trs[j].children[moveTd.index]) trs[j].children[moveTd.index].style.minWidth = newWidth;
                        }
                    }
                },0);
                moveTd.oldX = event.clientX;
            }
        };
    }
    //初始化
    this.init = function() {
        createHeader();
        if (_before)createHeaderBefore();
    };
};