|
|
@@ -9,7 +9,7 @@ window.Header = function getHeader(object) {
|
|
|
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 _name = "header:"+(object.name ? object.name+"." : "");//唯一名称 用于区别模块 本地存储
|
|
|
let _isForbidDrag = object.isForbidDrag;
|
|
|
|
|
|
let sortType = {}; //排序类型
|
|
|
@@ -18,6 +18,8 @@ window.Header = function getHeader(object) {
|
|
|
let moveTd = {}; //移动列
|
|
|
let isNested = _targetDom.getElementsByTagName("table").length>0;
|
|
|
|
|
|
+ let setting = "setting-column";
|
|
|
+
|
|
|
function getTargetChildNode(dom) { //递归获取input子节点
|
|
|
if (!dom || dom.tagName==='INPUT')return dom;
|
|
|
return getTargetChildNode(dom.firstElementChild);
|
|
|
@@ -288,10 +290,258 @@ window.Header = function getHeader(object) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ 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-spin 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[j].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 = "7%";
|
|
|
+ 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 _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">×</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,200)";
|
|
|
+ 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";
|
|
|
+ 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="×";
|
|
|
+ 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);
|
|
|
+ div21.appendChild(div211);
|
|
|
+ div2.appendChild(div21);
|
|
|
+ let div22 = document.createElement("div");
|
|
|
+ div22.id = "setting-header-body";
|
|
|
+ div22.style.display="none";
|
|
|
+ div22.appendChild(document.createTextNode("清除本地列宽设置："));
|
|
|
+ let btnA = document.createElement("button");
|
|
|
+ btnA.className = "btn btn-sm btn-outline-danger";
|
|
|
+ btnA.innerText = "清除全部";
|
|
|
+ btnA.onclick = bindClearEvent("header:");
|
|
|
+ div22.appendChild(btnA);
|
|
|
+ let btnB = document.createElement("button");
|
|
|
+ btnB.className = "ml-1 btn btn-sm btn-outline-danger";
|
|
|
+ btnB.innerText = "清除本页";
|
|
|
+ btnB.onclick = bindClearEvent(_name);
|
|
|
+ div22.appendChild(btnB);
|
|
|
+ div2.appendChild(div22);
|
|
|
+ div.appendChild(div2);
|
|
|
+ document.body.appendChild(div);
|
|
|
+ }
|
|
|
+ function createSetting() {
|
|
|
+ _createSetting1();
|
|
|
+ _createSetting2();
|
|
|
+ }
|
|
|
//初始化
|
|
|
this.init = function() {
|
|
|
if (!_isForbidDrag)repaintDom();
|
|
|
createHeader();
|
|
|
if (_before)createHeaderBefore();
|
|
|
+ createSetting();
|
|
|
+ _exeHid([]);
|
|
|
};
|
|
|
};
|
Zhouzhendong