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 !== false;//是否开启全选框
    let _data = object.data || [];   //被排序数据
    let _restorationColumn = object.restorationColumn || 'id'; //恢复原数据基准字段
    let _isRestorationColumnAsc = object.isRestorationColumnAsc || false;    //恢复原数据基准字段的排序类型 true:asc false:desc
    let _before = object.before;//前置元素
    let _name = "header:" + (object.name ? object.name + "." : "");//唯一名称 用于区别模块 本地存储
    let _isForbidDrag = object.isForbidDrag;

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

    let moveTd = {}; //移动列
    let isNested = _targetDom.getElementsByTagName("table").length > 0;

    let setting = "setting-column";
    let settingInfo = localStorage.getItem("settingInfo") ? JSON.parse(localStorage.getItem("settingInfo")) : {
        isCopyWrap: true
    };
    let keyCode = false;
    let settingCheck = true;
    var beforeHeaderDom;
    var headerDom;

    function getTargetChildNode(dom) { //递归获取input子节点
        if (!dom || dom.tagName === 'INPUT') return dom;
        return getTargetChildNode(dom.firstElementChild);
    }

    function createHeaderBefore() {//生成前置元素
        let tr = document.createElement("tr");
        tr.className = "text-center";
        _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.firstElementChild);
        beforeHeaderDom = tr;
    }

    function appendFloat(div, cla = "") {
        div.style.overflowX = "hidden";
        div.className = "m-0 p-0";
        let th = document.createElement("th");
        th.className = "pl-2 pr-2 header-float " + cla;
        th.style.top = _fixedTop + "px";
        th.appendChild(div);
        return th;
    }

    function createHeader() {//生成表头列
        let tr = document.createElement("tr");
        tr.className = "text-nowrap";
        let firstTr = _targetDom.getElementsByTagName("tr")[0];
        let tds = [];
        if (firstTr) tds = firstTr.children;
        if (_isCheckAllBox) {//是否开启全选
            let div = document.createElement("div");
            let check = document.createElement("input");
            check.type = "checkbox";
            check.id = "checkAll";
            if (firstTr) bindCheckbox(check);
            div.appendChild(check);
            tr.appendChild(appendFloat(div, "text-left"));
        }

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

    function defaultColumn(th, column) { //默认列样式的生成
        if (column.style) for (let key in column.style) if (column.style.hasOwnProperty(key)) th.parentElement.style[key] = column.style[key];
        if (column.class) th.parentElement.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);
    }

    //点击事件触发的排序规则
    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 (_isRestorationColumnAsc) {
                                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) {
        if (_isForbidDrag) return;
        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.firstElementChild) ? 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.firstElementChild.offsetWidth + diff + "px";
                if (diff !== 0) {
                    let trs = _targetDom.getElementsByTagName("tr");
                    for (let j = (_before ? 1 : 0); j < trs.length; j++) {
                        if (isNested) {
                            let table = trs[j].parentElement;
                            while (table.tagName !== 'TABLE') table = table.parentElement;
                            if (table.id !== object.el) continue;
                        }
                        if (trs[j].children[moveTd.index]) {
                            trs[j].children[moveTd.index].firstElementChild.style.width = newWidth;
                            trs[j].children[moveTd.index].style.minWidth = newWidth;
                        }
                    }
                    _targetDom.style.width = _targetDom.offsetWidth + diff + "px";
                    moveTd.oldX = event.clientX;
                }
            }
        };
    }

    function repaintDom() {
        let trs = _targetDom.getElementsByTagName("tr");
        for (let i = 0; i < trs.length; i++) {
            if (isNested) {
                let table = trs[i].parentElement;
                while (table.tagName !== 'TABLE') table = table.parentElement;
                if (table.id !== object.el) continue;
            }
            let tds = trs[i].children;
            for (let j = 0; j < tds.length; j++) {
                let count = tds[j].children.length;
                let div = document.createElement("div");
                div.style.overflowX = "hidden";
                for (let k = 0; k < count; k++) {
                    div.appendChild(tds[j].children[0]);
                }
                tds[j].appendChild(div);
                tds[j].className += " pl-2 pr-2";
            }
        }
    }

    function showSetting(type) {
        return function () {
            let type2 = type === "setting-1" ? "setting-2" : "setting-1";
            document.getElementById(type2).style.display = "";
            document.getElementById(type).style.display = "none";
        };
    }

    function _createSetting1() {
        /*
        * <div id="setting-1" onclick="tt()" style="position: fixed;bottom: 0;left: 0;background-color: #1b1e21;width: 50px;height: 50px;cursor: pointer;text-align: center;border-radius: 3px">
            <h1><span class="fa fa-spin fa-gear" style="color: white;"></span></h1>
        </div>
        * */
        let div = document.createElement("div");
        div.id = "setting-1";
        div.style.position = "fixed";
        div.style.bottom = 0;
        div.style.left = 0;
        div.style.backgroundColor = "#1b1e21";
        div.style.width = "50px";
        div.style.height = "50px";
        div.style.cursor = "pointer";
        div.style.textAlign = "center";
        div.style.borderRadius = "3px";
        let h1 = document.createElement("h1");
        let span = document.createElement("span");
        span.className = "fa fa-gear";
        span.style.color = "white";
        div.onclick = showSetting("setting-1");
        h1.appendChild(span);
        div.appendChild(h1);
        document.body.appendChild(div);
    }

    function _createSettingHeader(text, id) {
        let div = document.createElement("div");
        div.style.width = "5%";
        div.style.display = "inline-block";
        div.style.borderLeft = "1px solid #aaaaaa";
        div.style.textAlign = "center";
        div.style.cursor = "pointer";
        div.innerText = text;
        div.id = id;
        div.onclick = function () {
            if (event.target.id === setting) return;
            let old = document.getElementById(setting);
            old.style.backgroundColor = "";
            old.style.color = "";
            document.getElementById(setting + "-body").style.display = "none";
            event.target.style.backgroundColor = "#3490dc";
            event.target.style.color = "white";
            document.getElementById(event.target.id + "-body").style.display = "";
            setting = event.target.id;
        };
        return div;
    }

    function bindColumnEvent() {
        return function () {
            let storage = localStorage.getItem("column:" + object.name);
            let arr = storage ? storage.split(',') : [];
            localStorage.setItem("column:" + object.name, _exeHid(arr).toString());
        };
    }

    function _exeHid(arr) {
        let nodes = document.getElementById("setting-column-body").getElementsByTagName("input");
        let show = [];
        let hid = [];
        let newArr = [];
        for (let i = 0; i < nodes.length; i++) {
            let value = nodes[i].value;
            let index = nodes[i].dataset.index;
            let checked = nodes[i].checked;
            if (checked && arr.indexOf(value) !== -1) show.push(index);
            if (!checked) {
                newArr.push(value);
                if (arr.indexOf(value) === -1) hid.push(index);
            }
        }
        let trs = _targetDom.getElementsByTagName("tr"); //所有行
        let total = trs[_before ? 1 : 0].children.length; //最大列
        for (let i = 0; i < trs.length; i++) {
            if (isNested) { //排除表格嵌套
                let table = trs[i].parentElement;
                while (table.tagName !== 'TABLE') table = table.parentElement;
                if (table.id !== object.el) continue;
            }
            if (total !== trs[i].children.length) { //存在合并行/列
                let pointer = [];//建立一个指针数组 用于存储下标指向真实element
                for (let j = 0; j < trs[i].children.length; j++) {
                    if (trs[i].children[j] && trs[i].children[j].colSpan > 1) {
                        for (let k = 0; k < trs[i].children[j].colSpan; k++) pointer.push(j);
                    } else pointer.push(j);
                }
                for (let j = 0; j < show.length; j++) showOrHiddenDom(trs[i].children[pointer[show[j]]]);
                for (let j = 0; j < hid.length; j++) showOrHiddenDom(trs[i].children[pointer[hid[j]]], "hid");
            } else {
                for (let j = 0; j < show.length; j++) showOrHiddenDom(trs[i].children[show[j]]);
                for (let j = 0; j < hid.length; j++) showOrHiddenDom(trs[i].children[hid[j]], "hid");
            }
        }
        return newArr;
    }

    function showOrHiddenDom(dom, type = "show") {
        if (!dom) return;
        if (type === "show") {
            if (dom.colSpan > 1) dom.colSpan++;
            else dom.style.display = "";
        } else {
            if (dom.colSpan > 1) dom.colSpan--;
            else dom.style.display = "none";
        }
    }

    function appendCheckboxList(div) {
        let storage = localStorage.getItem("column:" + object.name);
        let arr = storage ? storage.split(',') : [];
        _columns.forEach(function (column, index) {
            let key = "setting-column-" + column.name;
            let label = document.createElement("label");
            label.style.float = "left";
            let input = document.createElement("input");
            input.type = "checkbox";
            input.id = key;
            input.className = "fixed-checkbox";
            input.dataset.index = _isCheckAllBox ? index + 1 : index;
            input.value = column.name;
            if (arr.indexOf(column.name) === -1) input.checked = true;
            label.appendChild(input);
            let la = document.createElement("label");
            la.setAttribute("for", key);
            label.appendChild(la);
            label.appendChild(document.createTextNode(column.type ? column.title : column.value));
            let prentLabel = document.createElement("label");
            prentLabel.style.width = "10%";
            prentLabel.appendChild(label);
            div.appendChild(prentLabel);
        });
    }

    function bindClearEvent(need) {
        return function () {
            for (let i = 0; i < localStorage.length; i++) {
                let key = localStorage.key(i);
                if (need === key.substring(0, need.length)) localStorage.removeItem(key);
            }
        };
    }

    function bindCheckAllEvent() {
        return function () {
            settingCheck = !settingCheck;
            let nodes = document.getElementById("setting-column-body").getElementsByTagName("input");
            for (let i = 0; i < nodes.length; i++) {
                if (nodes[i].checked !== settingCheck) nodes[i].checked = settingCheck;
            }
        }
    }

    function bindReverseEvent() {
        return function () {
            let nodes = document.getElementById("setting-column-body").getElementsByTagName("input");
            for (let i = 0; i < nodes.length; i++) nodes[i].checked = !nodes[i].checked;
        }
    }

    function _createSetting2() {
        /*
        * <div id="setting-2"  style="background-color: white;position: fixed;bottom: 0;left: 0;width: 100%;display: none">
            <div style="width: 100%;background-color: RGB(245,245,200);border-top: 1px solid #1b1e21">
                <div style="width: 30px;display:inline-block;text-align: center"><span class="fa fa-gear w-100 h-100"></span></div>
                <div style="width: 5%;display:inline-block;border-left: 1px solid #aaaaaa;text-align: center;cursor: pointer;background-color: #3490dc;color: white">显示列</div>
                <div style="width: 5%;display:inline-block;border-left: 1px solid #aaaaaa;text-align: center;cursor: pointer">表头设置</div>
                <b style="float: right;margin-right:10px;cursor: pointer;font-size: 18px">&times;</b>
            </div>
            <div style="width: 100%;min-height: 50px;">
                <div style="margin: 10px 50px 20px 50px;width: 100%;" id="setting-data">
                    <div id="setting-column">
                        <label style="margin-right: 10px">
                            测试<input type="checkbox" id="column-x" class="fixed-checkbox" value="1" onclick="test()">
                            <label for="column-x"></label>
                        </label>
                        <div>
                            <button class="btn btn-sm btn-success">保存</button>
                        </div>
                    </div>
                    <div id="setting-header">
                        清除本地列宽设置：
                        <button type="button" class="btn btn-sm btn-outline-danger">清除全部</button>
                        <button type="button" class="btn btn-sm btn-outline-danger">清除本页</button>
                    </div>
                </div>
            </div>
        </div>
        * */
        let div = document.createElement("div");
        div.id = "setting-2";
        div.style.backgroundColor = "white";
        div.style.position = "fixed";
        div.style.bottom = 0;
        div.style.left = 0;
        div.style.width = "100%";
        div.style.display = "none";
        let div1 = document.createElement("div");
        div1.style.width = "100%";
        div1.style.backgroundColor = "RGB(245,245,220)";
        div1.style.borderTop = "1px solid #1b1e21";
        let div11 = document.createElement("div");
        div11.style.width = "30px";
        div11.style.display = "inline-block";
        div11.style.textAlign = "center";
        let span = document.createElement("span");
        span.className = "fa fa-gear";
        span.style.cursor = "pointer";
        span.onclick = showSetting("setting-2");
        div11.appendChild(span);
        div1.appendChild(div11);
        let div12 = _createSettingHeader("显示列", "setting-column");
        div12.style.backgroundColor = "#3490dc";
        div12.style.color = "white";
        div1.appendChild(div12);
        div1.appendChild(_createSettingHeader("表头设置", "setting-header"));
        let b = document.createElement("b");
        b.style.float = "right";
        b.style.marginRight = "10px";
        b.style.cursor = "pointer";
        b.style.fontSize = "18px";
        b.innerHTML = "&times;";
        b.onclick = showSetting("setting-2");
        div1.appendChild(b);
        div.appendChild(div1);
        //body
        let div2 = document.createElement("div");
        div2.style.width = "100%";
        div2.style.minHeight = "50px";
        div2.style.margin = "10px 50px 20px 50px";
        let div21 = document.createElement("div");
        div21.id = "setting-column-body";
        appendCheckboxList(div21);
        let btn = document.createElement("button");
        btn.className = "btn btn-sm btn-success";
        btn.type = "button";
        btn.innerText = "保存设置";
        btn.onclick = bindColumnEvent();
        let div211 = document.createElement("div");
        div211.appendChild(btn);
        let btn1 = document.createElement("button");
        btn1.className = "btn btn-sm btn-outline-info ml-1";
        btn1.type = "button";
        btn1.innerText = "全选/取消";
        btn1.onclick = bindCheckAllEvent();
        div211.appendChild(btn1);
        let btn2 = document.createElement("button");
        btn2.className = "btn btn-sm btn-outline-info ml-1";
        btn2.type = "button";
        btn2.innerText = "反选";
        btn2.onclick = bindReverseEvent();
        div211.appendChild(btn2);
        div21.appendChild(div211);
        div2.appendChild(div21);
        let div22 = document.createElement("div");
        div22.id = "setting-header-body";
        div22.style.display = "none";
        let div221 = document.createElement("div");
        div221.className = "row mt-2";
        let text = document.createElement("label");
        text.innerText = "清除本地列宽设置：";
        text.className = "text-right col-3";
        div221.appendChild(text);
        let btnA = document.createElement("button");
        btnA.className = "btn btn-sm btn-outline-danger";
        btnA.innerText = "清除全部";
        btnA.onclick = bindClearEvent("header:");
        div221.appendChild(btnA);
        let btnB = document.createElement("button");
        btnB.className = "ml-1 btn btn-sm btn-outline-danger";
        btnB.innerText = "清除本页";
        btnB.onclick = bindClearEvent(_name);
        div221.appendChild(btnB);
        let div222 = document.createElement("div");
        div222.className = "row mt-2";
        let text2 = document.createElement("label");
        text2.innerText = "禁止复制换行：";
        text2.className = "text-right col-3";
        div222.appendChild(text2);
        let input = document.createElement("input");
        input.type = "checkbox";
        input.className = "switch";
        input.checked = settingInfo.isCopyNoWrap;
        input.onchange = function () {
            settingInfo.isCopyNoWrap = event.target.checked;
            localStorage.setItem("settingInfo", JSON.stringify(settingInfo));
        };
        let div223 = document.createElement("div");
        div223.className = "row";
        let text3 = document.createElement("label");
        text3.innerText = "消息通知：";
        text3.className = "text-right col-3";
        div223.appendChild(text3);
        let btn3 = document.createElement("button");
        btn3.className = "btn btn-sm btn-outline-info";
        btn3.innerText = "打开消息面板";
        btn3.onclick = function () {
            let height = window.screen.height;
            window.open("https://" + window.location.host + "/notification/regular", 'newwindow', 'height=' + (height * 0.7) + ', width=510 ,top=' + (height * 0.10) +
                'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
        };
        div223.appendChild(btn3);

        div222.appendChild(input);
        div22.appendChild(div223);
        div22.appendChild(div221);
        div22.appendChild(div222);
        div2.appendChild(div22);
        div.appendChild(div2);
        document.body.appendChild(div);
    }

    function createSetting() {
        _createSetting1();
        _createSetting2();
    }

    function bindGlobalEvent() {
        document.onkeydown = (e) => {
            if (e.ctrlKey && e.keyCode === 67) keyCode = true;
        };
        document.oncopy = (e) => {
            if (keyCode && settingInfo.isCopyNoWrap) {
                e.preventDefault();
                let content = window.getSelection().toString();
                e.clipboardData.setData("text", content.replace(/[\n\r]/g, ' '));
                keyCode = false;
            }
        };
    }

    //初始化
    this.init = function () {
        if (!_isForbidDrag) repaintDom();
        createHeader();
        if (_before) createHeaderBefore();
        createSetting();
        _exeHid([]);
        bindGlobalEvent();
        _targetDom.style.width = _targetDom.offsetWidth + "px";
    };

    this.redrawHeader = function(column) {
        _columns = column;
        if (beforeHeaderDom) {
            _targetDom.removeChild(beforeHeaderDom);
        }
        if (headerDom) {
            _targetDom.removeChild(headerDom);
        }
        createHeader();
        if (_before) createHeaderBefore();
    }
};