分页组件。

ShadowEditor.Web/locales/zh-CN.json

@@ -745,5 +745,10 @@
     "The name is already existed.": "该名称已经存在。",
     "Create Date": "创建日期",
     "Update Date": "更新日期",
-    "Status": "状态"
+    "Status": "状态",
+    "First Page": "第一页",
+    "Previous Page": "上一页",
+    "Current Page": "当前页",
+    "Next Page": "下一页",
+    "Last Page": "最后一页"
 }

ShadowEditor.Web/src/ui/image/ImageList.jsx

@@ -33,7 +33,7 @@ class ImageList extends React.Component {
     }
 
     render() {
-        const { className, style, data, firstPageText, lastPageText, currentPageText, previousPageText, nextPageText } = this.props;
+        const { className, style, data } = this.props;
         const { pageSize, pageNum } = this.state;
 
         const totalPage = this.getTotalPage();
@@ -59,11 +59,11 @@ class ImageList extends React.Component {
                 })}
             </div>
             <div className={'page'}>
-                <IconButton icon={'backward'} title={firstPageText} onClick={this.handleFirstPage}></IconButton>
-                <IconButton icon={'left-triangle2'} title={previousPageText} onClick={this.handlePreviousPage}></IconButton>
-                <Input className={'current'} value={(pageNum + 1).toString()} title={currentPageText} disabled={true} />
-                <IconButton icon={'right-triangle2'} title={nextPageText} onClick={this.handleNextPage}></IconButton>
-                <IconButton icon={'forward'} title={lastPageText} onClick={this.handleLastPage}></IconButton>
+                <IconButton icon={'backward'} title={_t('First Page')} onClick={this.handleFirstPage}></IconButton>
+                <IconButton icon={'left-triangle2'} title={_t('Previous Page')} onClick={this.handlePreviousPage}></IconButton>
+                <Input className={'current'} value={(pageNum + 1).toString()} title={_t('Current Page')} disabled={true} />
+                <IconButton icon={'right-triangle2'} title={_t('Next Page')} onClick={this.handleNextPage}></IconButton>
+                <IconButton icon={'forward'} title={_t('Last Page')} onClick={this.handleLastPage}></IconButton>
                 <div className={'info'}>
                     {_t('Total {{totalPage}} Pages', { totalPage: totalPage })}
                 </div>
@@ -158,11 +158,6 @@ ImageList.propTypes = {
     onClick: PropTypes.func,
     onEdit: PropTypes.func,
     onDelete: PropTypes.func,
-    firstPageText: PropTypes.string,
-    lastPageText: PropTypes.string,
-    currentPageText: PropTypes.string,
-    previousPageText: PropTypes.string,
-    nextPageText: PropTypes.string,
 };
 
 ImageList.defaultProps = {
@@ -172,11 +167,6 @@ ImageList.defaultProps = {
     onClick: null,
     onEdit: null,
     onDelete: null,
-    firstPageText: 'First Page',
-    lastPageText: 'Last Page',
-    currentPageText: 'Current Page',
-    previousPageText: 'Previous Page',
-    nextPageText: 'Next Page',
 };
 
 export default ImageList;

ShadowEditor.Web/src/ui/table/DataGrid.jsx

@@ -2,6 +2,8 @@ import './css/DataGrid.css';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 import Column from '../common/Column.jsx';
+import IconButton from '../form/IconButton.jsx';
+import Input from '../form/Input.jsx';
 
 /**
  * 数据表格
@@ -12,6 +14,11 @@ class DataGrid extends React.Component {
         super(props);
 
         this.handleClick = this.handleClick.bind(this, props.onSelect);
+
+        this.handleFirstPage = this.handleFirstPage.bind(this);
+        this.handlePreviousPage = this.handlePreviousPage.bind(this);
+        this.handleNextPage = this.handleNextPage.bind(this);
+        this.handleLastPage = this.handleLastPage.bind(this);
     }
 
     render() {
@@ -60,11 +67,21 @@ class DataGrid extends React.Component {
             </tbody>
         </table>;
 
-        return <div className={classNames('DataGrid', className)} style={style}>
+        return <div className={classNames('DataGrid', pages && 'pages', className)} style={style}>
             {head}
             <div className={'wrap'}>
                 {body}
             </div>
+            {pages && <div className={'page'}>
+                <IconButton icon={'backward'} title={_t('First Page')} onClick={this.handleFirstPage}></IconButton>
+                <IconButton icon={'left-triangle2'} title={_t('Previous Page')} onClick={this.handlePreviousPage}></IconButton>
+                <Input className={'current'} title={_t('Current Page')} disabled={true} />
+                <IconButton icon={'right-triangle2'} title={_t('Next Page')} onClick={this.handleNextPage}></IconButton>
+                <IconButton icon={'forward'} title={_t('Last Page')} onClick={this.handleLastPage}></IconButton>
+                <div className={'info'}>
+                    {_t('Total {{totalPage}} Pages', { totalPage: total })}
+                </div>
+            </div>}
         </div>;
     }
 
@@ -76,6 +93,22 @@ class DataGrid extends React.Component {
 
         onSelect && onSelect(record);
     }
+
+    handleFirstPage() {
+
+    }
+
+    handlePreviousPage() {
+
+    }
+
+    handleNextPage() {
+
+    }
+
+    handleLastPage() {
+
+    }
 }
 
 DataGrid.propTypes = {

ShadowEditor.Web/src/ui/table/css/DataGrid.css

@@ -36,6 +36,10 @@
     overflow-y: auto;
 }
 
+.DataGrid.pages>.wrap {
+    height: calc(100% - 52px);
+}
+
 .DataGrid>.wrap>.body {
     width: 100%;
     border-collapse: collapse;
@@ -68,4 +72,33 @@
 
 .DataGrid>.wrap>.body>tbody>tr:nth-child(1)>td {
     border-top: none;
+}
+
+.DataGrid>.page {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 12px;
+    padding: 2px 0;
+    border-top: 1px solid #ddd;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.DataGrid>.page>.IconButton {
+    width: 20px;
+    height: 20px;
+    margin: 0 2px;
+}
+
+.DataGrid>.page>.IconButton>.iconfont {
+    font-size: 14px;
+}
+
+.DataGrid>.page>.info {
+    margin: 0 8px 0 2px;
+    white-space: nowrap;
 }