listdata

src/index.js

@@ -8,6 +8,7 @@ import SignIn from './view/user/signIn'
 import List from './view/data/list'
 import Error from './components/Error'
 import Hello from './components/Hello'
+import './utils/lib.less'
 
 const routes = (
   <Router history={hashHistory}>

src/utils/index.js

@@ -1,25 +1,22 @@
-// 一些辅助用的工具方法
-// 很多都是gross hack, 属于历史遗留问题
-
 /** 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
  * 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
  * eg:
- * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
- * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
- * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
- * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
- * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
+ * (new Date()).format("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
+ * (new Date()).format("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
+ * (new Date()).format("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
+ * (new Date()).format("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
+ * (new Date()).format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
  */
 Date.prototype.format = function (fmt) {
   var o = {
-    "M+": this.getMonth() + 1, //月份
-    "d+": this.getDate(), //日
-    "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
-    "H+": this.getHours(), //小时
-    "m+": this.getMinutes(), //分
-    "s+": this.getSeconds(), //秒
-    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
-    "S": this.getMilliseconds() //毫秒
+    "M+": this.getMonth() + 1,
+    "d+": this.getDate(),
+    "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,
+    "H+": this.getHours(),
+    "m+": this.getMinutes(),
+    "s+": this.getSeconds(),
+    "q+": Math.floor((this.getMonth() + 3) / 3),
+    "S": this.getMilliseconds()
   };
   var week = {
     "0": "/u65e5",

src/utils/lib.js

@@ -1,7 +1,6 @@
 import config from 'config'
 import Logger from './logger'
 import reqwest from 'reqwest'
-import './lib.less'
 
 function ajax(data){
 

src/utils/lib.less

@@ -1 +1,21 @@
 @import "./utility.less";
+
+// table
+.ant-table {
+  .ant-table-thead > tr > th {
+    text-align: center;
+  }
+
+  td {
+    text-align: center;
+  }
+}
+.ant-table-small .ant-table-body > table{
+  padding: 0;
+}
+
+.ant-table-pagination {
+  float: none;
+  display: table;
+  margin: 16px auto;
+}

src/view/data/list.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { ajax, config, Logger } from '../../utils/lib'
-import { Icon, message, Table, Button, Row, Col } from 'antd'
+import { Icon, message, Table, Button, Row, Col, Dropdown, Menu } from 'antd'
 import './list.less'
 
 const logger = Logger.getLogger('List')
@@ -61,12 +61,18 @@ let List = React.createClass({
     })
   },
   render() {
-    const columns = [{
+    const columns = [
+      {
+        title: '头像',
+        dataIndex: 'picture',
+        width:64,
+        className:'avatar-col',
+        render: text => <img width='24' src={text.thumbnail} />,
+      },{
       title: '姓名',
       dataIndex: 'name',
       sorter: true,
-      render: name => `${name.first} ${name.last}`,
-      width: '20%',
+      render: text => `${text.first} ${text.last}`,
     }, {
       title: '性别',
       dataIndex: 'gender',
@@ -74,10 +80,46 @@ let List = React.createClass({
         { text: 'Male', value: 'male' },
         { text: 'Female', value: 'female' },
       ],
-      width: '20%',
     }, {
+      title: '座机',
+      dataIndex: 'cell',
+    }, {
+      title: '国家',
+      dataIndex: 'nat',
+    }, {
+      title: '城市',
+      dataIndex: 'location',
+      render: text => text.city,
+    },{
+      title: '手机',
+      dataIndex: 'phone',
+    },{
       title: '邮箱',
       dataIndex: 'email',
+    },{
+      title: '时间',
+      dataIndex: 'dob',
+      render: text => new Date(text).format("yyyy-MM-dd hh:mm:ss"),
+    },{
+      title: '操作',
+      dataIndex: 'login',
+      render: (text,it) => {
+        const menu = (
+          <Menu>
+            <Menu.Item>
+              <a href='javascript:;'>编辑</a>
+            </Menu.Item>
+            <Menu.Item>
+              <a href='javascript:;'>删除</a>
+            </Menu.Item>
+          </Menu>
+        )
+        return <Dropdown overlay={menu}>
+                <a className="ant-dropdown-link" href="javascript:;">
+                  操作 <Icon type="down" />
+                </a>
+              </Dropdown>
+      },
     }]
     return (
       <div>
@@ -89,6 +131,7 @@ let List = React.createClass({
         pagination={this.state.pager}
         loading={this.state.loading}
         onChange={this.handleTableChange}
+        className="list-table"
         size="small" />
     </div>
     )

src/view/data/list.less

@@ -0,0 +1,9 @@
+
+.list-table{
+  .avatar-col{
+    line-height: 1;
+  }
+  td{
+    height: 39px;
+  }
+}