Commit 45883b163d8d2668353db35f60a8db2f3d6f7d15
1 parent
a4efb55f
feat(table): 优化组件
Showing
3 changed files
with
49 additions
and
26 deletions
Show diff stats
build/Table/Table.js
| ... | ... | @@ -124,20 +124,32 @@ angular.module("esNgAntd").directive("antdTable", function (esNgAntd) { |
| 124 | 124 | |
| 125 | 125 | $scope.getRender = function (column, record, index) { |
| 126 | 126 | let params = $scope.getParameterName(column.render); |
| 127 | - return column | |
| 128 | - .render(record[column.key], record, index) | |
| 129 | - .replace( | |
| 130 | - new RegExp(`(\{\{.*?)${params[0]}(.*?\}\})`, "g"), | |
| 131 | - `$1dataSource[${index}].${column.key}$2` | |
| 132 | - ) | |
| 133 | - .replace( | |
| 134 | - new RegExp(`(\{\{.*?)${params[1]}(.*?\}\})`, "g"), | |
| 135 | - `$1dataSource[${index}]$2` | |
| 136 | - ) | |
| 137 | - .replace( | |
| 138 | - new RegExp(`(\{\{.*?)${params[2]}(.*?\}\})`, "g"), | |
| 139 | - `$1${index}$2` | |
| 140 | - ); | |
| 127 | + let render = column.render(record[column.key], record, index); | |
| 128 | + | |
| 129 | + if ($attrs.dSource) { | |
| 130 | + if (params[0]) { | |
| 131 | + render = render.replace( | |
| 132 | + new RegExp(`(\{\{.*?)${params[0]}(.*?\}\})`, "g"), | |
| 133 | + `$1${$attrs.dSource}[${index}].${column.key}$2` | |
| 134 | + ); | |
| 135 | + } | |
| 136 | + | |
| 137 | + if (params[1]) { | |
| 138 | + render = render.replace( | |
| 139 | + new RegExp(`(\{\{.*?)${params[1]}(.*?\}\})`, "g"), | |
| 140 | + `$1${$attrs.dSource}[${index}]$2` | |
| 141 | + ); | |
| 142 | + } | |
| 143 | + | |
| 144 | + if (params[2]) { | |
| 145 | + render = render.replace( | |
| 146 | + new RegExp(`(\{\{.*?)${params[2]}(.*?\}\})`, "g"), | |
| 147 | + `$1${index}$2` | |
| 148 | + ); | |
| 149 | + } | |
| 150 | + } | |
| 151 | + | |
| 152 | + return render; | |
| 141 | 153 | }; |
| 142 | 154 | |
| 143 | 155 | $scope.handleSelectAll = function (event) { | ... | ... |
dist/ng-antd.js
| ... | ... | @@ -411,7 +411,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Tab |
| 411 | 411 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 412 | 412 | |
| 413 | 413 | "use strict"; |
| 414 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Table_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Table.html */ \"./build/Table/Table.html\");\n/* harmony import */ var antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table/style/index.css */ \"./node_modules/antd/lib/table/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTable\", function (esNgAntd) {\n return {\n controllerAs: \"antdTable\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n columns: \"=\",\n dSource: \"=\",\n rowSelection: \"=\",\n rowKey: \"@\",\n loading: \"@\",\n onChange: \"&\",\n size: \"@\",\n },\n template: _Table_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n size: $scope.size || \"default\",\n dataSource: [],\n selectedrecordKeys: [],\n selectedrecords: [],\n isSelectAll: false,\n rowKey: $scope.rowKey || \"id\",\n sortDirections: [\"ascend\", \"descend\"],\n sorter: {\n field: null,\n order: null,\n },\n };\n $scope.watch = {\n dSource: (newValue) => {\n if (newValue !== undefined) {\n let dataSource = [];\n newValue.forEach((record, index) => {\n let row = {};\n\n if ($scope.rowSelection) {\n row.checked = false;\n row.disabled = false;\n }\n\n if (\n $scope.rowSelection &&\n typeof $scope.rowSelection.getCheckboxProps ===\n \"function\"\n ) {\n let extraAttr =\n $scope.rowSelection.getCheckboxProps(\n record\n );\n row = Object.assign(row, extraAttr);\n }\n\n $scope.columns.forEach((column) => {\n // 排序\n if (column.sortOrder) {\n $scope.state.sorter.field = column.key;\n $scope.state.sorter.order =\n column.sortOrder;\n }\n\n row[column.key] = column.render\n ? $scope.getRender(column, record, index)\n : record[column.key];\n }); // 主键\n\n if ($scope.rowKey !== undefined) {\n row[$scope.state.rowKey] =\n record[$scope.state.rowKey];\n } else {\n row[$scope.state.rowKey] = index + 1;\n }\n\n dataSource[index] = row;\n });\n $scope.state.dataSource = dataSource;\n }\n },\n \"rowSelection.selectedRowKeys\": (newVal) => {\n if (Array.isArray(newVal)) {\n if (newVal.length > 0) {\n $scope.state.dataSource.map(function (row, key) {\n if (newVal.includes(key)) {\n row.checked = true;\n }\n });\n } else {\n $scope.state.dataSource.map(function (row) {\n row.checked = false;\n });\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.getParameterName = function (fn) {\n if (typeof fn !== \"object\" && typeof fn !== \"function\") return;\n const COMMENTS = /((\\/\\/.*$)|(\\/\\*[\\s\\S]*?\\*\\/))/gm;\n const DEFAULT_PARAMS = /=[^,)]+/gm;\n const FAT_ARROWS = /=>.*$/gm;\n let code = fn.prototype\n ? fn.prototype.constructor.toString()\n : fn.toString();\n code = code\n .replace(COMMENTS, \"\")\n .replace(FAT_ARROWS, \"\")\n .replace(DEFAULT_PARAMS, \"\");\n let result = code\n .slice(code.indexOf(\"(\") + 1, code.indexOf(\")\"))\n .match(/([^\\s,]+)/g);\n return result === null ? [] : result;\n };\n\n $scope.getRender = function (column, record, index) {\n let params = $scope.getParameterName(column.render);\n return column\n .render(record[column.key], record, index)\n .replace(\n new RegExp(`(\\{\\{.*?)${params[0]}(.*?\\}\\})`, \"g\"),\n `$1dataSource[${index}].${column.key}$2`\n )\n .replace(\n new RegExp(`(\\{\\{.*?)${params[1]}(.*?\\}\\})`, \"g\"),\n `$1dataSource[${index}]$2`\n )\n .replace(\n new RegExp(`(\\{\\{.*?)${params[2]}(.*?\\}\\})`, \"g\"),\n `$1${index}$2`\n );\n };\n\n $scope.handleSelectAll = function (event) {\n $scope.state.isSelectAll = event.target.checked;\n $scope.state.selectedrecordKeys = [];\n $scope.state.selectedrecords = [];\n $scope.state.dataSource.map((record, key) => {\n if (record.disabled === false) {\n record.checked = event.target.checked;\n }\n\n if (record.checked) {\n $scope.state.selectedrecordKeys.push(key);\n $scope.state.selectedrecords.push($scope.dSource[key]);\n }\n\n return record;\n });\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSelect = function (event, index) {\n let pos = $scope.state.selectedrecordKeys.findIndex(\n (value) => value === index\n );\n\n if (event.target.checked && pos === -1) {\n $scope.state.selectedrecordKeys.push(index);\n $scope.state.selectedrecords.push($scope.dSource[index]);\n } else {\n $scope.state.selectedrecordKeys.splice(pos, 1);\n $scope.state.selectedrecords.splice(pos, 1);\n }\n\n if ($scope.state.selectedrecordKeys.length === 0) {\n $scope.state.isSelectAll = false;\n }\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSorter = function (key) {\n $scope.state.sorter.field = key;\n\n if ($scope.state.sorter.order === null) {\n $scope.state.sorter.order = \"ascend\";\n } else if ($scope.state.sorter.order === \"ascend\") {\n $scope.state.sorter.order = \"descend\";\n } else if ($scope.state.sorter.order === \"descend\") {\n $scope.state.sorter.order = null;\n $scope.state.sorter.field = null;\n }\n\n $scope.onChange({\n sorter: $scope.state.sorter,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-table\", antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.js?"); | |
| 414 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Table_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Table.html */ \"./build/Table/Table.html\");\n/* harmony import */ var antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/table/style/index.css */ \"./node_modules/antd/lib/table/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdTable\", function (esNgAntd) {\n return {\n controllerAs: \"antdTable\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n columns: \"=\",\n dSource: \"=\",\n rowSelection: \"=\",\n rowKey: \"@\",\n loading: \"@\",\n onChange: \"&\",\n size: \"@\",\n },\n template: _Table_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n size: $scope.size || \"default\",\n dataSource: [],\n selectedrecordKeys: [],\n selectedrecords: [],\n isSelectAll: false,\n rowKey: $scope.rowKey || \"id\",\n sortDirections: [\"ascend\", \"descend\"],\n sorter: {\n field: null,\n order: null,\n },\n };\n $scope.watch = {\n dSource: (newValue) => {\n if (newValue !== undefined) {\n let dataSource = [];\n newValue.forEach((record, index) => {\n let row = {};\n\n if ($scope.rowSelection) {\n row.checked = false;\n row.disabled = false;\n }\n\n if (\n $scope.rowSelection &&\n typeof $scope.rowSelection.getCheckboxProps ===\n \"function\"\n ) {\n let extraAttr =\n $scope.rowSelection.getCheckboxProps(\n record\n );\n row = Object.assign(row, extraAttr);\n }\n\n $scope.columns.forEach((column) => {\n // 排序\n if (column.sortOrder) {\n $scope.state.sorter.field = column.key;\n $scope.state.sorter.order =\n column.sortOrder;\n }\n\n row[column.key] = column.render\n ? $scope.getRender(column, record, index)\n : record[column.key];\n }); // 主键\n\n if ($scope.rowKey !== undefined) {\n row[$scope.state.rowKey] =\n record[$scope.state.rowKey];\n } else {\n row[$scope.state.rowKey] = index + 1;\n }\n\n dataSource[index] = row;\n });\n $scope.state.dataSource = dataSource;\n }\n },\n \"rowSelection.selectedRowKeys\": (newVal) => {\n if (Array.isArray(newVal)) {\n if (newVal.length > 0) {\n $scope.state.dataSource.map(function (row, key) {\n if (newVal.includes(key)) {\n row.checked = true;\n }\n });\n } else {\n $scope.state.dataSource.map(function (row) {\n row.checked = false;\n });\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n $scope.getParameterName = function (fn) {\n if (typeof fn !== \"object\" && typeof fn !== \"function\") return;\n const COMMENTS = /((\\/\\/.*$)|(\\/\\*[\\s\\S]*?\\*\\/))/gm;\n const DEFAULT_PARAMS = /=[^,)]+/gm;\n const FAT_ARROWS = /=>.*$/gm;\n let code = fn.prototype\n ? fn.prototype.constructor.toString()\n : fn.toString();\n code = code\n .replace(COMMENTS, \"\")\n .replace(FAT_ARROWS, \"\")\n .replace(DEFAULT_PARAMS, \"\");\n let result = code\n .slice(code.indexOf(\"(\") + 1, code.indexOf(\")\"))\n .match(/([^\\s,]+)/g);\n return result === null ? [] : result;\n };\n\n $scope.getRender = function (column, record, index) {\n let params = $scope.getParameterName(column.render);\n let render = column.render(record[column.key], record, index);\n\n if ($attrs.dSource) {\n if (params[0]) {\n render = render.replace(\n new RegExp(`(\\{\\{.*?)${params[0]}(.*?\\}\\})`, \"g\"),\n `$1${$attrs.dSource}[${index}].${column.key}$2`\n );\n }\n\n if (params[1]) {\n render = render.replace(\n new RegExp(`(\\{\\{.*?)${params[1]}(.*?\\}\\})`, \"g\"),\n `$1${$attrs.dSource}[${index}]$2`\n );\n }\n\n if (params[2]) {\n render = render.replace(\n new RegExp(`(\\{\\{.*?)${params[2]}(.*?\\}\\})`, \"g\"),\n `$1${index}$2`\n );\n }\n }\n\n return render;\n };\n\n $scope.handleSelectAll = function (event) {\n $scope.state.isSelectAll = event.target.checked;\n $scope.state.selectedrecordKeys = [];\n $scope.state.selectedrecords = [];\n $scope.state.dataSource.map((record, key) => {\n if (record.disabled === false) {\n record.checked = event.target.checked;\n }\n\n if (record.checked) {\n $scope.state.selectedrecordKeys.push(key);\n $scope.state.selectedrecords.push($scope.dSource[key]);\n }\n\n return record;\n });\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSelect = function (event, index) {\n let pos = $scope.state.selectedrecordKeys.findIndex(\n (value) => value === index\n );\n\n if (event.target.checked && pos === -1) {\n $scope.state.selectedrecordKeys.push(index);\n $scope.state.selectedrecords.push($scope.dSource[index]);\n } else {\n $scope.state.selectedrecordKeys.splice(pos, 1);\n $scope.state.selectedrecords.splice(pos, 1);\n }\n\n if ($scope.state.selectedrecordKeys.length === 0) {\n $scope.state.isSelectAll = false;\n }\n\n if (typeof $scope.rowSelection.onChange === \"function\") {\n $scope.rowSelection.onChange(\n $scope.state.selectedrecordKeys,\n $scope.state.selectedrecords\n );\n }\n };\n\n $scope.handleSorter = function (key) {\n $scope.state.sorter.field = key;\n\n if ($scope.state.sorter.order === null) {\n $scope.state.sorter.order = \"ascend\";\n } else if ($scope.state.sorter.order === \"ascend\") {\n $scope.state.sorter.order = \"descend\";\n } else if ($scope.state.sorter.order === \"descend\") {\n $scope.state.sorter.order = null;\n $scope.state.sorter.field = null;\n }\n\n $scope.onChange({\n sorter: $scope.state.sorter,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-table\", antd_lib_table_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Table/Table.js?"); | |
| 415 | 415 | |
| 416 | 416 | /***/ }), |
| 417 | 417 | ... | ... |
src/Table/Table.js
| ... | ... | @@ -111,17 +111,28 @@ class Table { |
| 111 | 111 | |
| 112 | 112 | getRender(column, record, index) { |
| 113 | 113 | let params = this.getParameterName(column.render); |
| 114 | - return column | |
| 115 | - .render(record[column.key], record, index) | |
| 116 | - .replace( | |
| 117 | - new RegExp(`(\{\{.*?)${params[0]}(.*?\}\})`, "g"), | |
| 118 | - `$1dataSource[${index}].${column.key}$2` | |
| 119 | - ) | |
| 120 | - .replace( | |
| 121 | - new RegExp(`(\{\{.*?)${params[1]}(.*?\}\})`, "g"), | |
| 122 | - `$1dataSource[${index}]$2` | |
| 123 | - ) | |
| 124 | - .replace(new RegExp(`(\{\{.*?)${params[2]}(.*?\}\})`, "g"), `$1${index}$2`); | |
| 114 | + let render = column.render(record[column.key], record, index); | |
| 115 | + if ($attrs.dSource) { | |
| 116 | + if (params[0]) { | |
| 117 | + render = render.replace( | |
| 118 | + new RegExp(`(\{\{.*?)${params[0]}(.*?\}\})`, "g"), | |
| 119 | + `$1${$attrs.dSource}[${index}].${column.key}$2` | |
| 120 | + ); | |
| 121 | + } | |
| 122 | + if (params[1]) { | |
| 123 | + render = render.replace( | |
| 124 | + new RegExp(`(\{\{.*?)${params[1]}(.*?\}\})`, "g"), | |
| 125 | + `$1${$attrs.dSource}[${index}]$2` | |
| 126 | + ); | |
| 127 | + } | |
| 128 | + if (params[2]) { | |
| 129 | + render = render.replace( | |
| 130 | + new RegExp(`(\{\{.*?)${params[2]}(.*?\}\})`, "g"), | |
| 131 | + `$1${index}$2` | |
| 132 | + ); | |
| 133 | + } | |
| 134 | + } | |
| 135 | + return render; | |
| 125 | 136 | } |
| 126 | 137 | |
| 127 | 138 | handleSelectAll(event) { | ... | ... |