|
|
@@ -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,12 @@ window.Header = function getHeader(object) {
|
|
|
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 settingCheck = true;
|
|
|
+
|
|
|
function getTargetChildNode(dom) { //递归获取input子节点
|
|
|
if (!dom || dom.tagName==='INPUT')return dom;
|
|
|
return getTargetChildNode(dom.firstElementChild);
|
|
|
@@ -37,7 +43,7 @@ window.Header = function getHeader(object) {
|
|
|
if (be.class)th.className = be.class;
|
|
|
tr.appendChild(th);
|
|
|
});
|
|
|
- _targetDom.insertBefore(tr, _targetDom.firstChild);
|
|
|
+ _targetDom.insertBefore(tr, _targetDom.firstElementChild);
|
|
|
}
|
|
|
function appendFloat(div,cla="") {
|
|
|
div.style.overflowX = "hidden";
|
|
|
@@ -78,7 +84,7 @@ window.Header = function getHeader(object) {
|
|
|
while(trs[0] && trs[0].tagName !== 'TR')trs = trs[0].children;
|
|
|
if (trs[0]){
|
|
|
for (let j=0;j<trs.length;j++){
|
|
|
- trs[j].children[i].firstChild.style.width = wid+"px";
|
|
|
+ trs[j].children[i].firstElementChild.style.width = wid+"px";
|
|
|
trs[j].children[i].style.minWidth = wid+"px";
|
|
|
}
|
|
|
}
|
|
|
@@ -90,7 +96,7 @@ window.Header = function getHeader(object) {
|
|
|
tr.appendChild(th);
|
|
|
}
|
|
|
bindMove(tr);
|
|
|
- if (_targetDom.firstChild)_targetDom.insertBefore(tr, _targetDom.firstChild);
|
|
|
+ if (_targetDom.firstElementChild)_targetDom.insertBefore(tr, _targetDom.firstElementChild);
|
|
|
else _targetDom.appendChild(tr);
|
|
|
}
|
|
|
|
|
|
@@ -243,7 +249,7 @@ window.Header = function getHeader(object) {
|
|
|
moveTd.dom.style.cursor = 'default';
|
|
|
moveTd.oldX = undefined;
|
|
|
setTimeout(function () {
|
|
|
- let column = _columns[(_isCheckAllBox && _targetDom.firstChild) ? moveTd.index-1 : moveTd.index];
|
|
|
+ let column = _columns[(_isCheckAllBox && _targetDom.firstElementChild) ? moveTd.index-1 : moveTd.index];
|
|
|
if (column) localStorage.setItem(_name+column.name, moveTd.dom.offsetWidth);
|
|
|
});
|
|
|
}
|
|
|
@@ -252,7 +258,7 @@ window.Header = function getHeader(object) {
|
|
|
if (moveTd.oldX){
|
|
|
event.stopPropagation();
|
|
|
let diff = event.clientX-moveTd.oldX;
|
|
|
- let newWidth = moveTd.dom.firstChild.offsetWidth+diff+"px";
|
|
|
+ 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++){
|
|
|
@@ -261,7 +267,7 @@ window.Header = function getHeader(object) {
|
|
|
while (table.tagName!=='TABLE') table = table.parentElement;
|
|
|
if (table.id!==object.el)continue;
|
|
|
}
|
|
|
- trs[j].children[moveTd.index].firstChild.style.width = newWidth;
|
|
|
+ trs[j].children[moveTd.index].firstElementChild.style.width = newWidth;
|
|
|
trs[j].children[moveTd.index].style.minWidth = newWidth;
|
|
|
}
|
|
|
moveTd.oldX = event.clientX;
|
|
|
@@ -279,19 +285,328 @@ window.Header = function getHeader(object) {
|
|
|
}
|
|
|
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";
|
|
|
- let count = tds[j].childNodes.length;
|
|
|
- for (let k=0;k<count;k++){div.appendChild(tds[j].childNodes[0]);}
|
|
|
+ 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">×</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="×";
|
|
|
+ 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";
|
|
|
+ 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));
|
|
|
+ };
|
|
|
+ div222.appendChild(input);
|
|
|
+ div22.appendChild(div221);
|
|
|
+ div22.appendChild(div222);
|
|
|
+ div2.appendChild(div22);
|
|
|
+ div.appendChild(div2);
|
|
|
+ document.body.appendChild(div);
|
|
|
+ }
|
|
|
+ function createSetting() {
|
|
|
+ _createSetting1();
|
|
|
+ _createSetting2();
|
|
|
+ }
|
|
|
+ function bindGlobalEvent() {
|
|
|
+ document.oncopy = () => {
|
|
|
+ if (settingInfo.isCopyNoWrap){
|
|
|
+ event.preventDefault();
|
|
|
+ let content = window.getSelection().toString();
|
|
|
+ event.clipboardData.setData("text", content.replace(/[\n\r]/g,' '));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
//初始化
|
|
|
this.init = function() {
|
|
|
if (!_isForbidDrag)repaintDom();
|
|
|
createHeader();
|
|
|
if (_before)createHeaderBefore();
|
|
|
+ createSetting();
|
|
|
+ _exeHid([]);
|
|
|
+ bindGlobalEvent();
|
|
|
};
|
|
|
};
|