diff --git a/build/Button/Button.html b/build/Button/Button.html index d67e1b0..c94b759 100644 --- a/build/Button/Button.html +++ b/build/Button/Button.html @@ -1,4 +1,4 @@ - -
  • - {{value}} +
  • + {{value}} + +
    + + + ••• +
    +
  • \";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.html?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.html?"); /***/ }), @@ -9617,7 +9617,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); /***/ }), diff --git a/example/button.html b/example/button.html index 302c4de..26062c9 100644 --- a/example/button.html +++ b/example/button.html @@ -20,6 +20,7 @@ I am button.

    Link

    Link + Link

    Ghost

    Link

    Loading

    diff --git a/example/pagination.html b/example/pagination.html index 9ae13bf..e00e97b 100644 --- a/example/pagination.html +++ b/example/pagination.html @@ -9,8 +9,8 @@
    - - + +
    diff --git a/example/table.html b/example/table.html index 3ff7414..3e2fe51 100644 --- a/example/table.html +++ b/example/table.html @@ -30,6 +30,7 @@ title: "航线", key: "age", sorter: true, + sortOrder: "ascend" }, { title: "状态", diff --git a/src/Button/Button.html b/src/Button/Button.html index 9057f9e..2f106bb 100644 --- a/src/Button/Button.html +++ b/src/Button/Button.html @@ -1,4 +1,4 @@ -
    • - {state.pageNumList.map(function (value) { - return
  • - {value} + {state.pageNumList.map(function (value, key) { + return
  • + {(value!=='prev'&&value!=='next')&&{value}} + {(value==='prev'||value==='next')&& +
    + {value==="prev"&&} + {value==="next"&&} + ••• +
    +     }
    • })}
  • diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index 3bc674e..e77ed59 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -2,7 +2,6 @@ import template from "./Pagination.html"; import style from "antd/lib/pagination/style/index.css"; class Pagination { - useModules = ["esNgAntd"]; template = template; @@ -31,16 +30,79 @@ class Pagination { constructor() { esNgAntd.createStyle("ant-pagination", style); this.state.total = Number(this.props.total || 0); - this.state.current = Number(this.props.current || this.props.defaultCurrent || 1); - this.state.pageSize = this.props.pageSize || this.props.defaultPageSize || 10; + this.state.current = Number( + this.props.current || this.props.defaultCurrent || 1 + ); + this.state.pageSize = + this.props.pageSize || this.props.defaultPageSize || 10; this.state.pageNum = this.getPageNum(); - this.state.pageNumList = Array(this.state.pageNum) - .fill(0) - .map((v, i) => i + 1); + this.state.pageNumList = this.getPageNumList(); + } + + getItemLinkClassName(value) { + if (typeof value === "number") { + return ( + "ant-pagination-item" + + (this.state.current === value + ? " ant-pagination-item-active" + : "") + ); + } else { + return "ant-pagination-jump-next ant-pagination-jump-next-custom-icon"; + } + } + + getPageNumList() { + let pageNumList = [this.state.current]; + let pageNum = this.getPageNum(); + if (pageNum <= 7 || this.state.current - 1 < 4) { + for (let i = this.state.current - 1; i > 0; i--) { + pageNumList.unshift(i); + } + } else { + let len = this.state.current - 1 > 2 ? 2 : this.state.current - 1; + for (let i = 1; i <= len; i++) { + pageNumList.unshift(this.state.current - i); + } + if (this.state.current - 2 > 2) { + pageNumList.unshift("prev"); + pageNumList.unshift(1); + } + } + + if (pageNum <= 7 || pageNum - this.state.current < 4) { + for (let i = this.state.current + 1; i <= pageNum; i++) { + pageNumList.push(i); + } + } else { + let limit = + 3 - this.state.current > 0 ? 2 + (3 - this.state.current) : 2; + let len = + pageNum - this.state.current > limit + ? limit + : pageNum - this.state.current; + for (let i = 1; i <= len; i++) { + pageNumList.push(this.state.current + i); + } + if (pageNum - this.state.current > 2) { + pageNumList.push("next"); + pageNumList.push(pageNum); + } + } + return pageNumList; } getPageNum() { - return Math.ceil(this.state.total / (this.props.pageSize || this.props.defaultPageSize || 10)) || 1; + return ( + Math.ceil( + this.state.total / + (this.props.pageSize || this.props.defaultPageSize || 10) + ) || 1 + ); + } + + getPopupContainer() { + return $element[0].querySelector(".ant-pagination-options"); } handleNext() { @@ -50,10 +112,6 @@ class Pagination { this.handleClick(++this.state.current); } - getPopupContainer() { - return $element[0].querySelector(".ant-pagination-options"); - } - handlePrev() { if (this.state.current === 1) { return false; @@ -62,7 +120,13 @@ class Pagination { } handleClick(value) { - this.state.current = value; + if (value === "next") { + value = this.state.current + 5; + } + if (value === "prev") { + value = this.state.current - 5; + } + this.setCurrent(this.getCurrent(value)); // 更新回调 this.props.onChange({ page: this.state.current, @@ -88,7 +152,7 @@ class Pagination { this.state.pageSize = parseInt(value); this.handleChange(); } - + getCurrent(number) { if (number > this.state.pageNum) { return this.state.pageNum; @@ -104,6 +168,7 @@ class Pagination { return; } this.state.current = this.getCurrent(value); + this.state.pageNumList = this.getPageNumList(); this.handleChange(); } diff --git a/src/Select/Select.js b/src/Select/Select.js index 8430ac7..4d5b6dd 100644 --- a/src/Select/Select.js +++ b/src/Select/Select.js @@ -72,6 +72,8 @@ class Select { } let func = this.props.getPopupContainer(); if (typeof func === "function" && func() !== undefined) { + let containerElement = func(); + containerElement.style.position = "relative"; return { top: $element[0].offsetTop, left: $element[0].offsetLeft, diff --git a/src/Table/Table.js b/src/Table/Table.js index d55efd4..1f89ec0 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -25,7 +25,7 @@ class Table { sorter: { field: null, order: null, - }, + } }; template = template; @@ -50,6 +50,11 @@ class Table { row = Object.assign(row, extraAttr); } this.props.columns.forEach((column) => { + // 排序 + if (column.sortOrder) { + this.state.sorter.field = column.key; + this.state.sorter.order = column.sortOrder; + } row[column.key] = column.render ? column.render(record[column.key], record, index) : record[column.key]; diff --git a/webpack.config.js b/webpack.config.js index 8aeae93..57039d4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,9 +6,9 @@ module.exports = { entry: "./build/index.js", output: { // bpms - path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", + // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd", // boss - // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", + path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", // mvo // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", // local -- libgit2 0.21.2