-- 优化querySelector
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
import sort from './vdom';
|
import sort from './vdom';
|
||||||
import {
|
import {
|
||||||
cloneNode,
|
|
||||||
appendChild,
|
appendChild,
|
||||||
appendChildren,
|
appendChildren,
|
||||||
removeChild,
|
removeChild,
|
||||||
@@ -20,7 +19,6 @@ import {
|
|||||||
} from './utils';
|
} from './utils';
|
||||||
import scrollBarWidth from './scrollbar-width';
|
import scrollBarWidth from './scrollbar-width';
|
||||||
|
|
||||||
|
|
||||||
export default function initMixin(Table) {
|
export default function initMixin(Table) {
|
||||||
Table.prototype._init = function(options = {}) {
|
Table.prototype._init = function(options = {}) {
|
||||||
if (!options.selector) {
|
if (!options.selector) {
|
||||||
@@ -34,7 +32,6 @@ export default function initMixin(Table) {
|
|||||||
if (!table) return;
|
if (!table) return;
|
||||||
|
|
||||||
vm.gutterWidth = scrollBarWidth();
|
vm.gutterWidth = scrollBarWidth();
|
||||||
|
|
||||||
root.classList.add("smart-table");
|
root.classList.add("smart-table");
|
||||||
|
|
||||||
options.size && root.classList.add("smart-table-custom-" + options.size)
|
options.size && root.classList.add("smart-table-custom-" + options.size)
|
||||||
@@ -55,7 +52,7 @@ export default function initMixin(Table) {
|
|||||||
const theadHeight = thead.offsetHeight;
|
const theadHeight = thead.offsetHeight;
|
||||||
const tableHeight = table.offsetHeight;
|
const tableHeight = table.offsetHeight;
|
||||||
let customHeight = options.height;
|
let customHeight = options.height;
|
||||||
customHeight = (typeof customHeight === 'function' ? customHeight() : customHeight) || tableHeight;
|
customHeight = (typeof customHeight === 'function' ? customHeight.call() : customHeight) || tableHeight;
|
||||||
customHeight = customHeight > theadHeight ? customHeight : (theadHeight + 100);
|
customHeight = customHeight > theadHeight ? customHeight : (theadHeight + 100);
|
||||||
//获取table宽高
|
//获取table宽高
|
||||||
vm.size = {
|
vm.size = {
|
||||||
@@ -81,10 +78,10 @@ export default function initMixin(Table) {
|
|||||||
//初始化fixed元素及宽度
|
//初始化fixed元素及宽度
|
||||||
initFixed(thead, vm);
|
initFixed(thead, vm);
|
||||||
//初始化table 拆分table的thead和tbody
|
//初始化table 拆分table的thead和tbody
|
||||||
vm.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead);
|
vm.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead, vm.scrollY);
|
||||||
vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody);
|
vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody);
|
||||||
|
|
||||||
appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper])
|
appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper]);
|
||||||
|
|
||||||
vm.size.theadHeight = thead.offsetHeight;
|
vm.size.theadHeight = thead.offsetHeight;
|
||||||
vm.size.tbodyHeight = customHeight - thead.offsetHeight;
|
vm.size.tbodyHeight = customHeight - thead.offsetHeight;
|
||||||
@@ -92,7 +89,7 @@ export default function initMixin(Table) {
|
|||||||
//删除空余的table节点
|
//删除空余的table节点
|
||||||
removeChild(table.parentNode, table);
|
removeChild(table.parentNode, table);
|
||||||
|
|
||||||
createFixed(vm, thead, tbody)
|
createFixed(vm, thead, tbody);
|
||||||
|
|
||||||
//获取tbody的data数据
|
//获取tbody的data数据
|
||||||
vm.data = initData(vm, tbody);
|
vm.data = initData(vm, tbody);
|
||||||
@@ -116,8 +113,7 @@ function layout() {
|
|||||||
function getColgroup(thead, tbody, theadLength) {
|
function getColgroup(thead, tbody, theadLength) {
|
||||||
let arr = [];
|
let arr = [];
|
||||||
if (theadLength === 1) {
|
if (theadLength === 1) {
|
||||||
//单行
|
querySelectorAll(thead, "tr:first-child>th").forEach(column => {
|
||||||
querySelectorAll(querySelector(thead, "tr"), "th").forEach(column => {
|
|
||||||
let width = getIntByAttr(column, "width", 0);
|
let width = getIntByAttr(column, "width", 0);
|
||||||
if (width === 0) {
|
if (width === 0) {
|
||||||
width = column.offsetWidth > 80 ? column.offsetWidth : 80;
|
width = column.offsetWidth > 80 ? column.offsetWidth : 80;
|
||||||
@@ -125,8 +121,7 @@ function getColgroup(thead, tbody, theadLength) {
|
|||||||
arr.push(width)
|
arr.push(width)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
//多行
|
querySelectorAll(tbody, "tr:first-child>td").forEach(column => {
|
||||||
querySelectorAll(querySelector(tbody, "tr"), "td").forEach(column => {
|
|
||||||
let width = column.offsetWidth;
|
let width = column.offsetWidth;
|
||||||
if (width < 50) {
|
if (width < 50) {
|
||||||
width = width + 10;
|
width = width + 10;
|
||||||
@@ -154,7 +149,7 @@ function replaceFixedColGroup(vm, selector, newTableWidth) {
|
|||||||
let fixedBody = querySelector(selector, '.smart-table_body');
|
let fixedBody = querySelector(selector, '.smart-table_body');
|
||||||
replaceColGroup(vm, fixedHeader);
|
replaceColGroup(vm, fixedHeader);
|
||||||
replaceColGroup(vm, fixedBody);
|
replaceColGroup(vm, fixedBody);
|
||||||
const columns = querySelectorAll(querySelector(selector, "tr"), "th");
|
const columns = querySelectorAll(selector, "tr:first-child>th");
|
||||||
let fixedWrapperWidth = 0;
|
let fixedWrapperWidth = 0;
|
||||||
columns.forEach((item, index) => {
|
columns.forEach((item, index) => {
|
||||||
if (item.className != 'is-hidden') fixedWrapperWidth += vm.colgroup[index]
|
if (item.className != 'is-hidden') fixedWrapperWidth += vm.colgroup[index]
|
||||||
@@ -310,7 +305,7 @@ function initFixed(thead, vm) {
|
|||||||
tbody: [],
|
tbody: [],
|
||||||
width: 0
|
width: 0
|
||||||
};
|
};
|
||||||
const columns = querySelectorAll(querySelector(thead, "tr"), "th");
|
const columns = querySelectorAll(thead, "tr:first-child>th");
|
||||||
const len = columns.length;
|
const len = columns.length;
|
||||||
let lastLeftIndex = 0;
|
let lastLeftIndex = 0;
|
||||||
if (len !== 0) {
|
if (len !== 0) {
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export default function(vm, theadModel, tbodyModel) {
|
|||||||
|
|
||||||
function createHeaderWrapper(vm, model, meta) {
|
function createHeaderWrapper(vm, model, meta) {
|
||||||
let thead = cloneNode(model, true);
|
let thead = cloneNode(model, true);
|
||||||
querySelectorAll(querySelector(thead, "tr"), "th").forEach((column, index) => {
|
querySelectorAll(thead, "tr:first-child>th").forEach((column, index) => {
|
||||||
if (meta.thead.indexOf("field-" + index) === -1) {
|
if (meta.thead.indexOf("field-" + index) === -1) {
|
||||||
column.classList.add('is-hidden')
|
column.classList.add('is-hidden')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,11 +15,11 @@ export function refactorCell(cell) {
|
|||||||
appendChild(cell, wrapper)
|
appendChild(cell, wrapper)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createTabelWrapper(className, vm, type, content) {
|
export function createTabelWrapper(className, vm, type, content, hasGutter) {
|
||||||
let wrapper = createElement("div", className);
|
let wrapper = createElement("div", className);
|
||||||
let table = createElement("table", "smart-table_" + type);
|
let table = createElement("table", "smart-table_" + type);
|
||||||
table.style.width = (vm.size.tabelWidth - 1) + "px";
|
table.style.width = (vm.size.tabelWidth - 1) + "px";
|
||||||
appendChildren(table, [createColgroup(vm.colgroup), content])
|
appendChildren(table, [createColgroup(vm.colgroup, vm.gutterWidth, hasGutter), content])
|
||||||
appendChild(wrapper, table)
|
appendChild(wrapper, table)
|
||||||
return wrapper;
|
return wrapper;
|
||||||
}
|
}
|
||||||
@@ -78,7 +78,7 @@ export function debounce(delay, callback) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function createColgroup(arr) {
|
function createColgroup(arr, gutterWidth, hasGutter) {
|
||||||
if (!arr) return;
|
if (!arr) return;
|
||||||
let colgroup = createElement("colgroup");
|
let colgroup = createElement("colgroup");
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
@@ -86,5 +86,10 @@ function createColgroup(arr) {
|
|||||||
col.setAttribute("width", item);
|
col.setAttribute("width", item);
|
||||||
appendChild(colgroup, col)
|
appendChild(colgroup, col)
|
||||||
})
|
})
|
||||||
|
if (hasGutter) {
|
||||||
|
let col = createElement("col");
|
||||||
|
col.setAttribute("width", gutterWidth)
|
||||||
|
appendChild(colgroup, col)
|
||||||
|
}
|
||||||
return colgroup;
|
return colgroup;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user