|
|
@@ -10,11 +10,13 @@ window.Header = function getHeader(object) {
|
|
|
let _is_restorationColumn_asc = object.is_restorationColumn_asc || false; //恢复原数据基准字段的排序类型 true:asc false:desc
|
|
|
let _before = object.before;//前置元素
|
|
|
let _name = object.name ? object.name+"." : "";//唯一名称 用于区别模块 本地存储
|
|
|
+ let _isForbidDrag = object.isForbidDrag;
|
|
|
|
|
|
let sortType = {}; //排序类型
|
|
|
let columnArr = []; //列数组
|
|
|
|
|
|
let moveTd = {}; //移动列
|
|
|
+ let isNested = _targetDom.getElementsByTagName("table").length>0;
|
|
|
|
|
|
function getTargetChildNode(dom) { //递归获取input子节点
|
|
|
if (!dom || dom.tagName==='INPUT')return dom;
|
|
|
@@ -22,6 +24,7 @@ window.Header = function getHeader(object) {
|
|
|
}
|
|
|
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;
|
|
|
@@ -36,54 +39,58 @@ window.Header = function getHeader(object) {
|
|
|
});
|
|
|
_targetDom.insertBefore(tr, _targetDom.firstChild);
|
|
|
}
|
|
|
- function appendFloat(th) {
|
|
|
- th.style.position = "sticky";
|
|
|
- th.style.position = "-webkit-sticky";
|
|
|
+ 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.style.backgroundColor = "white";
|
|
|
- th.style.zIndex = "99";
|
|
|
+ th.appendChild(div);
|
|
|
+ return th;
|
|
|
}
|
|
|
function createHeader() {//生成表头列
|
|
|
let tr = document.createElement("tr");
|
|
|
- tr.className = "text-center";
|
|
|
+ tr.className = "text-nowrap";
|
|
|
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 div = document.createElement("div");
|
|
|
let check = document.createElement("input");
|
|
|
check.type = "checkbox";
|
|
|
check.id = "checkAll";
|
|
|
if (firstTr)bindCheckbox(check);
|
|
|
- th.appendChild(check);
|
|
|
- tr.appendChild(th);
|
|
|
+ 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 th = document.createElement("th");
|
|
|
- appendFloat(th);
|
|
|
+ let div = document.createElement("div");
|
|
|
+ let th = appendFloat(div);
|
|
|
let column = _columns[(_isCheckAllBox && firstTr) ? i-1 : i];
|
|
|
let wid = localStorage.getItem(_name+column.name);
|
|
|
if (wid){
|
|
|
+ div.style.width = wid+"px";
|
|
|
+ th.style.minWidth = wid+"px";
|
|
|
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";
|
|
|
+ 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].style.minWidth = wid+"px";
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
if (column){
|
|
|
- if (column.type === 'multi') multiColumn(th,column);
|
|
|
- else defaultColumn(th,column);
|
|
|
+ if (column.type === 'multi') multiColumn(div,column);
|
|
|
+ else defaultColumn(div,column);
|
|
|
}
|
|
|
tr.appendChild(th);
|
|
|
}
|
|
|
bindMove(tr);
|
|
|
- if (_targetDom.firstChild) _targetDom.insertBefore(tr, _targetDom.firstChild);
|
|
|
+ if (_targetDom.firstChild)_targetDom.insertBefore(tr, _targetDom.firstChild);
|
|
|
else _targetDom.appendChild(tr);
|
|
|
}
|
|
|
|
|
|
@@ -105,12 +112,11 @@ window.Header = function getHeader(object) {
|
|
|
});
|
|
|
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;
|
|
|
+ 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){
|
|
|
@@ -122,7 +128,6 @@ window.Header = function getHeader(object) {
|
|
|
}
|
|
|
span.appendChild(document.createTextNode((column.value ? column.value : '')));
|
|
|
th.appendChild(span);
|
|
|
- return th;
|
|
|
}
|
|
|
|
|
|
//点击事件触发的排序规则
|
|
|
@@ -218,6 +223,7 @@ window.Header = function getHeader(object) {
|
|
|
}
|
|
|
}
|
|
|
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;
|
|
|
@@ -246,22 +252,45 @@ window.Header = function getHeader(object) {
|
|
|
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;
|
|
|
+ let newWidth = moveTd.dom.firstChild.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;
|
|
|
}
|
|
|
+ trs[j].children[moveTd.index].firstChild.style.width = newWidth;
|
|
|
+ trs[j].children[moveTd.index].style.minWidth = newWidth;
|
|
|
}
|
|
|
- },0);
|
|
|
- moveTd.oldX = event.clientX;
|
|
|
+ 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 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]);}
|
|
|
+ tds[j].appendChild(div);
|
|
|
+ tds[j].className += " pl-2 pr-2";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
//初始化
|
|
|
this.init = function() {
|
|
|
+ if (!_isForbidDrag)repaintDom();
|
|
|
createHeader();
|
|
|
if (_before)createHeaderBefore();
|
|
|
};
|