diff --git a/README.md b/README.md
index 2fb339b..bb252dc 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,10 @@
| 合计 |
...
18988.00 |
+ ...
+
+
+
```
- 初始化表格
```javascript
@@ -65,14 +69,14 @@
### Table Attributes
-| Property | Tag Position | Description |
-| :---------------- | :--------------------- | :---------------------------------------------------------------- |
-| stripe | table | 表格是否需要斑马间隔色 |
-| fixed | thead -> tr -> th | 是否固定该列 |
-| sort | thead -> tr -> th | 是否对该列有排序功能（默认按照string排序，可指定为sort="number" ） |
-| unsort | tbody -> tr | 可指定body中的某一行不参与排序 |
-| expand | tbody -> tr | 可指定body中的某一行是否需要展开 |
-| expand-child | tbody -> tr | 可指定body中的某一行为上一级子项 |
+| Property | Tag Position | Description |
+| :---------------- | :--------------------- | :---------------------------------------------------------------------------- |
+| stripe | table | 表格是否需要斑马间隔色 |
+| fixed | thead -> tr -> th | 是否固定该列 |
+| sort | thead -> tr -> th | 是否对该列有排序功能（默认按照string排序，可指定为sort="number" ） |
+| unsort | tbody -> tr | 可指定body中的某一行不参与排序 |
+| expand | tbody -> tr | 可指定body中的某一行是否需要展开， 指定expand="001" 001为当前行的ID |
+| expand-parent | tbody -> tr | 可指定body中的某一行是子项， 指定expand-parent="001" 001为父级ID |
### Table Options
diff --git a/examples/index.html b/examples/index.html
index eb8e3e9..e371a98 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -262,7 +262,6 @@
| Id |
- Logo |
日期 |
姓名 |
省份（包含自治区） |
@@ -272,7 +271,7 @@
-
+
| 001 |
2020-05-02 |
王小虎2 |
@@ -280,9 +279,8 @@
长宁区2 |
上海市长宁区淞虹路888号2 |
200332 |
- 查看2 |
-
+
| 001-1 |
2020-05-03 |
上小虎3 |
@@ -290,9 +288,8 @@
长宁区3 |
上海市长宁区淞虹路888号3 |
200333 |
- 查看3 |
-
+
| 001-2 |
2020-05-03 |
上小虎3 |
@@ -300,9 +297,8 @@
长宁区3 |
上海市长宁区淞虹路888号3 |
200333 |
- 查看3 |
-
+
| 001-2-1 |
2020-05-03 |
上小虎3 |
@@ -310,9 +306,8 @@
长宁区3 |
上海市长宁区淞虹路888号3 |
200333 |
- 查看3 |
-
+
| 001-2-2 |
2020-05-03 |
上小虎3 |
@@ -320,9 +315,17 @@
长宁区3 |
上海市长宁区淞虹路888号3 |
200333 |
- 查看3 |
-
+
+ | 001-3 |
+ 2020-05-03 |
+ 上小虎3 |
+ 上海3 |
+ 长宁区3 |
+ 上海市长宁区淞虹路888号3 |
+ 200333 |
+
+
| 002 |
2020-01-03 |
小小虎1 |
@@ -330,9 +333,8 @@
长宁区1 |
上海市长宁区淞虹路888号1 |
200331 |
- 查看1 |
-
+
| 002-1 |
2020-05-04 |
王小虎4 |
@@ -340,9 +342,8 @@
长宁区4 |
上海市长宁区淞虹路888号4 |
200334 |
- 查看4 |
-
+
| 002-2 |
2020-01-03 |
小小虎1 |
@@ -350,7 +351,6 @@
长宁区1 |
上海市长宁区淞虹路888号1 |
200331 |
- 查看1 |
| 003 |
@@ -360,7 +360,6 @@
长宁区4 |
上海市长宁区淞虹路888号4 |
200334 |
- 查看4 |
diff --git a/lib/core/core.js b/lib/core/core.js
index 6a71df5..0579649 100644
--- a/lib/core/core.js
+++ b/lib/core/core.js
@@ -3,6 +3,7 @@ import {
setAttribute,
removeAttribute,
hasAttribute,
+ getAttribute,
appendChild,
appendChildren,
removeChild,
@@ -14,7 +15,7 @@ import createFixed from './fixed';
import {
throttle,
debounce,
- getIntByAttr,
+ getAttrNumber,
refactorCell,
replaceColGroup,
createTableWrapper,
@@ -42,11 +43,14 @@ export default function initMixin(Table) {
options.align && root.classList.add("stb-cust-" + options.align)
hasAttribute(table, "stripe") && tbody.classList.add("stripe")
- //树形结构时 清理不应该有的sort及fixed
- options.expand && (querySelectorAll(thead, 'th[sort]').forEach(column => {
+ options.expand ? (querySelectorAll(thead, 'th[sort]').forEach(column => {
removeAttribute(column, "sort")
}), querySelectorAll(thead, 'th[fixed]').forEach(column => {
removeAttribute(column, "fixed")
+ })) : (querySelectorAll(tbody, 'tr[expand]').forEach(column => {
+ removeAttribute(column, "expand")
+ }), querySelectorAll(thead, 'tr[expand-parent]').forEach(column => {
+ removeAttribute(column, "expand-parent")
}))
const vm = this;
@@ -125,9 +129,9 @@ function initColgroupData(vm) {
props.shapes.forEach(shape => {
shape.forEach((column, cIndex) => {
if (column) {
- let colspan = getIntByAttr(column, 'colspan', 1)
+ let colspan = getAttrNumber(column, 'colspan', 1)
if (colspan === 1) {
- arr[cIndex] = getIntByAttr(column, 'width', 0)
+ arr[cIndex] = getAttrNumber(column, 'width', 0)
}
}
})
@@ -230,31 +234,25 @@ function syncPostion(vm) {
}
function bindExpandEvents(vm) {
-
function seek(arr) {
arr.forEach(item => {
if (item.expand) {
- let row = item.$el;
- let column = querySelector(row, "td");
- column.addEventListener('click', () => {
- let display = '';
- if (hasAttribute(row, "expanded")) {
- removeAttribute(row, "expanded")
- display = 'none'
- } else {
- setAttribute(row, "expanded")
- }
- if (item.children) {
- item.children.forEach(child => child.$el.style.display = display)
- }
+ querySelector(item.$el, "td").addEventListener('click', () => {
+ expanding(item, !hasAttribute(item.$el, "expanded"))
})
- if (item.children && item.children.length > 0) seek(item.children)
+ item.children && seek(item.children)
}
})
+
+ function expanding(item, expanded) {
+ expanded ? setAttribute(item.$el, "expanded") : removeAttribute(item.$el, "expanded");
+ item.children && (item.children.forEach(child => {
+ child.$el.style.display = expanded ? '' : 'none';
+ expanding(child, expanded)
+ }))
+ }
}
-
seek(vm.expandData)
-
}
function bindScrollEvents(vm) {
@@ -296,7 +294,7 @@ function bindSortEvents(vm) {
el.addEventListener("click", $event => {
$event.stopPropagation();
let sortType = "ASC";
- let sortOrder = el.getAttribute("sort") || "string";
+ let sortOrder = getAttribute(el, "sort") || "string";
if (el.classList.contains("asc")) {
el.classList.remove("asc");
el.classList.add("desc");
@@ -311,7 +309,7 @@ function bindSortEvents(vm) {
}
return item
})
- sort(vm, el.getAttribute("sortkey"), sortType, sortOrder)
+ sort(vm, getAttribute(el, "sortkey"), sortType, sortOrder)
})
})
}
@@ -325,8 +323,8 @@ function initProps(vm) {
let shape = shapes[index] || [];
let columns = querySelectorAll(row, "th");
columns.forEach((column) => {
- let rowspan = getIntByAttr(column, "rowspan", 1);
- let colspan = getIntByAttr(column, "colspan", 1);
+ let rowspan = getAttrNumber(column, "rowspan", 1);
+ let colspan = getAttrNumber(column, "colspan", 1);
let insertIndex = getEmptyIndexInArray(shape) || shape.length;
shape[insertIndex] = column;
@@ -382,7 +380,7 @@ function initFixed(vm) {
if (hasAttribute(columns[i], "fixed")) {
lastLeftIndex = i;
fixedLeft.thead.push("field-" + i);
- let colspan = getIntByAttr(columns[i], "colspan", 1);
+ let colspan = getAttrNumber(columns[i], "colspan", 1);
for (let j = 0; j < colspan; j++) {
fixedLeft.tbody.push("field-" + (i + j));
fixedLeft.width += colgroup[i + j];
@@ -402,7 +400,7 @@ function initFixed(vm) {
break;
}
fixedRight.thead.push("field-" + i);
- let colspan = getIntByAttr(columns[i], "colspan", 1);
+ let colspan = getAttrNumber(columns[i], "colspan", 1);
for (let j = 0; j < colspan; j++) {
rightCnt++;
fixedRight.tbody.push("field-" + (colgroupLen - rightCnt))
@@ -419,43 +417,49 @@ function initFixed(vm) {
}
function initExpand(vm, tbody) {
- const expandedAll = vm.options.defaultExpandAll;
+ const expandAll = vm.options.defaultExpandAll;
let data = [];
let parents = [];
querySelectorAll(tbody, "tr").forEach(row => {
+ let paddingLength = parents.length;
let expand = hasAttribute(row, "expand");
- let child = hasAttribute(row, "expand-child");
- let node = { $el: row, expand: expand };
- if (child) {
- querySelector(row, "td").style.paddingLeft = 20 * (parents.length) + "px";
- row.style.display = expandedAll ? '' : 'none'
- }
+ let hasParent = hasAttribute(row, "expand-parent");
+ let node = { $el: row, id: getAttribute(row, "expand"), expand: expand };
if (expand) {
- if (expandedAll) {
+ if (expandAll) {
setAttribute(row, 'expanded')
} else {
removeAttribute(row, 'expanded')
}
}
- if (expand && !child) {
+ if (expand && !hasParent) {
node.children = [];
parents = [node];
data.push(node);
- } else if (!expand && child) {
- let parent = parents[parents.length - 1]
- if (parent) {
- parent.children.push(node)
+ } else if (hasParent) {
+ let parentId = getAttribute(row, "expand-parent");
+ let arr = [];
+ for (let i = 0; i < parents.length; i++) {
+ arr.push(parents[i])
+ if (parents[i].id === parentId) {
+ break
+ }
}
- } else if (expand && child) {
- node.children = [];
- let parent = parents[parents.length - 1]
- if (parent) {
- parent.children.push(node)
+ parents = arr;
+ paddingLength = parents.length;
+ let parent = parents[parents.length - 1];
+ parent && parent.children.push(node);
+ if (expand) {
+ parents.push(node)
+ node.children = [];
}
- parents.push(node)
} else {
data.push(node)
}
+ if (hasParent) {
+ querySelector(row, "td").style.paddingLeft = 20 * paddingLength + "px";
+ row.style.display = expandAll ? '' : 'none'
+ }
})
vm.expandData = data;
vm.$tbodyWrapper.style.height = ''
diff --git a/lib/core/fixed.js b/lib/core/fixed.js
index f322dc4..7294dbe 100644
--- a/lib/core/fixed.js
+++ b/lib/core/fixed.js
@@ -6,7 +6,7 @@ import {
querySelectorAll
} from './node-ops';
import {
- getIntByAttr,
+ getAttrNumber,
createTableWrapper,
} from './utils';
@@ -64,7 +64,7 @@ function createBodyWrapper(vm, model, meta, type) {
if (type === 'left') {
offsetX = index
} else {
- offsetX += getIntByAttr(column, "colspan", 1);
+ offsetX += getAttrNumber(column, "colspan", 1);
}
if (meta.tbody.indexOf("field-" + offsetX) === -1) {
column.classList.add('is-hidden')
diff --git a/lib/core/node-ops.js b/lib/core/node-ops.js
index a7ad569..c33222e 100644
--- a/lib/core/node-ops.js
+++ b/lib/core/node-ops.js
@@ -16,6 +16,10 @@ export function setAttribute(node, attrName, attrValue) {
return node.setAttribute(attrName, attrValue || true)
}
+export function getAttribute(node, attrName) {
+ return node.getAttribute(attrName)
+}
+
export function removeAttribute(node, attrName) {
return node.removeAttribute(attrName)
}
diff --git a/lib/core/utils.js b/lib/core/utils.js
index 3d67e81..0796952 100644
--- a/lib/core/utils.js
+++ b/lib/core/utils.js
@@ -1,5 +1,6 @@
import {
appendChild,
+ getAttribute,
createElement,
querySelector,
appendChildren,
@@ -31,8 +32,8 @@ export function replaceColGroup(vm) {
})
}
-export function getIntByAttr(el, key, def) {
- return Number.parseInt(el.getAttribute(key) || def)
+export function getAttrNumber(el, key, def) {
+ return Number.parseInt(getAttribute(el, key) || def)
}
export function getEmptyIndexInArray(array) {
diff --git a/package.json b/package.json
index 8dcb77d..60c13db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "smart-table",
- "version": "1.1.1",
+ "version": "1.1.2",
"description": "smart table for static html",
"main": "index.js",
"scripts": {
@@ -30,4 +30,4 @@
},
"dependencies": {},
"keywords": []
-}
+}
\ No newline at end of file