Merge branch 'master' into 20190226_resizeable

# Conflicts: # demo/TreeGridDemo.jsx # src/Header/HeaderCell.jsx
uxcore · Mar 12, 2019 · 1718d71 · 1718d71
2 parents fe80460 + 3130e33
commit 1718d71
Show file tree

Hide file tree

Showing 20 changed files with 6,520 additions and 106 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,9 +1,25 @@
+
 # History
+## 10.5.8
+* `FIXED` fix a bug when multiple table instances exist on a page in rowOrder & DraggableList
+
+## 10.5.7
+* `FIXED` hide action bar when actionBar is empty
+
+## 10.5.6
+* `FIXED`fix tree mode table logic
+
+## 10.5.5
+* `REVERT` revert to 10.5.2
+
+## 10.5.4
+* `FIXED` fix tree mode table logic
+
 ## 10.5.2
-* `FIX` fix styles
+* `FIXED` fix styles
 
 ## 10.5.1
-* `FIX` fix styles & add setPickerGroups prop for group columns
+* `FIXED` fix styles & add setPickerGroups prop for group columns
 
 ## 10.5.0
 * `CHANGE` Update ListActionBar for compatibility with older versions

diff --git a/README.md b/README.md
@@ -46,6 +46,8 @@ $ npm start
 * addEmptyRowFromTop(): 从顶部添加一个空的新行。
 * addRow(rowData): 以指定数据添加一个新行。
 * addRowFromTop(rowData): 以指定数据从顶部添加一个新行。
+* addSubRow(subRowData, rowData, cb): 树形表格模式下从底部插入一个子树节点行
+* addSubRomFromTop(subRowData, rowData, cb): 树形表格模式下从顶部插入一个子树节点行
 * delRow(rowData): 删除一个新行。
 * editRow(rowData): 使指定的行切换到编辑模式。
 * editAllRow(): 使所有行切换到编辑模式。

diff --git a/demo/GridEditDemo.jsx b/demo/GridEditDemo.jsx
@@ -354,7 +354,6 @@ class Demo extends React.Component {
         {
           title: '恢复所有行',
           callback: () => {
-            debugger
             me.table.resetAllRow();
           },
         },

diff --git a/demo/TreeGridDemo.jsx b/demo/TreeGridDemo.jsx
@@ -8,97 +8,257 @@
 
 import React from 'react';
 import Table from '../src';
+import Constants from 'uxcore-const';
+
 import NattyFetch from 'natty-fetch';
 
 const urlPrefix = window.urlPrefix || 'http://30.9.174.1:3000/';
 
 function loadTreeData(rowData) {
-  const request = NattyFetch.create({
-    method: 'GET',
-    url: `${urlPrefix}demo/rowData.json`,
-    data: '',
-    Promise,
-  });
-  return request();
+  // const request = NattyFetch.create({
+  //   method: 'GET',
+  //   url: `${urlPrefix}demo/rowData.json`,
+  //   data: '',
+  //   Promise,
+  // });
+  // return request();
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        data: [
+          {
+            "id": `${setTimeout(0)}`,
+            "radio": true,
+            "grade": "2grade2",
+            "email": "2email2",
+            "firstName": "2firstName2",
+            "lastName": "2lastName2",
+            "birthDate": "2birthDate2",
+            "country": "2country2",
+            "city": "2city2",
+            "data": []
+          },
+          {
+            "id": `${setTimeout(0)}`,
+            "check": true,
+            "grade": "2grade3",
+            "email": "2email3",
+            "firstName": "2firstName3",
+            "lastName": "2lastName3",
+            "birthDate": "2birthDate3",
+            "country": "2country3",
+            "city": "2city3"
+          }
+        ]
+      })
+    }, 500)
+  })
 }
 
 class Demo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      columns: [
+        {
+          dataKey: 'country',
+          title: '国家',
+          width: '200px',
+          ordered: true,
+          align: 'left',
+          type: 'money',
+          delimiter: ',',
+          fixed: true,
+        },
+        {
+          dataKey: 'city',
+          title: '城市',
+          width: '150px',
+        },
+        {
+          dataKey: 'firstName',
+          title: 'FristName',
+        },
+        {
+          dataKey: 'lastName',
+          title: 'LastName',
+        },
+        {
+          dataKey: 'email',
+          title: 'Email',
+          width: '200px',
+          ordered: true,
+        },
+        {
+          title: '操作',
+          type: 'action',
+          rightFixed: true,
+          width: '300px',
+          collapseNum: 5,
+          actions: [
+            {
+              title: '新增子行',
+              callback: (rowData) => {
+                this.table.addSubRow({
+                  "id": `${setTimeout(0)}`,
+                  "check": true,
+                  "grade": "2grade3",
+                  "email": "2email",
+                  "firstName": "2firstName3",
+                  "lastName": "2lastName3",
+                  "birthDate": "2birthDate3",
+                  "country": `country_${setTimeout(0)}`,
+                  "city": "2city3"
+                }, rowData, () => {
+                  console.log(this.table.getData())
+                })
+              }
+            },
+            {
+              title: '上移',
+              callback: (rowData) => {
+                this.table.moveRowUp(rowData);
+              },
+            },
+            {
+              title: '删除',
+              callback: (rowData) => {
+                this.table.delRow(rowData);
+              },
+            },
+            {
+              title: '下移',
+              callback: (rowData) => { this.table.moveRowDown(rowData); },
+            },
+          ],
+        },
+      ]
     };
   }
-
   render() {
-    const columns = [
-      {
-        dataKey: 'id',
-        title: 'ID',
-        width: '50px',
-        hidden: true,
-      },
-      {
-        dataKey: 'country',
-        title: '国家',
-        width: '300px',
-        ordered: true,
-        align: 'left',
-        type: 'money',
-        fixed: true,
-        delimiter: ',',
-      },
-      {
-        dataKey: 'city',
-        title: '城市',
-        width: '150px',
-      },
-      {
-        dataKey: 'firstName',
-        title: 'FristName',
-      },
-      {
-        dataKey: 'lastName',
-        title: 'LastName',
-      },
-      {
-        dataKey: 'email',
-        title: 'Email',
-        width: '200px',
-        ordered: true,
-      },
-      {
-        title: '操作',
-        type: 'action',
-        width: '200px',
-        actions: [
-          {
-            title: '上移',
-            callback: (rowData) => {
-              this.table.moveRowUp(rowData);
-            },
-          },
-          {
-            title: '删除',
-            callback: (rowData) => {
-              this.table.delRow(rowData);
-            },
-          },
-          {
-            title: '下移',
-            callback: (rowData) => { this.table.moveRowDown(rowData); },
-          },
-        ],
-      },
-    ];
-
     const renderProps = {
-      height: '400px',
+      height: '600px',
       width: '1000px',
       showSearch: true,
       levels: 0,
       fetchUrl: `${urlPrefix}demo/data.json`,
       loadTreeData,
-      jsxcolumns: columns,
+      processData(data) {
+        data.data.map(item => {
+          item.data = []
+        });
+        return data
+      },
+      useListActionBar: true,
+      showColumnPickerCheckAll: true,
+      showColumnPicker: true,
+      actionBar: {
+        columnsOrder: {
+          iconName: 'huxiangguanzhu',
+          // keepActiveInCustomView: true,
+          title: '列排序',
+          includeActionColumn: false,  // 优先级低于fixed和rightFixed
+          onChange(dragInfo, data) {
+            console.log(data)
+          }
+        },
+        buttons: [
+          {
+            title: '新增一行',
+            callback: () => {
+              this.table.addRowFromTop(
+                {
+                  "id": `${setTimeout(0)}`,
+                  "check": true,
+                  "grade": "2grade3",
+                  "email": "2email",
+                  "firstName": "2firstName3",
+                  "lastName": "2lastName3",
+                  "birthDate": "2birthDate3",
+                  "country": `country_${setTimeout(0)}`,
+                  "city": "2city3"
+                }
+              )
+            }
+          },
+          {
+            title: '变更columns',
+            callback: () => {
+              this.setState({
+                columns: [
+                  {
+                    dataKey: 'id',
+                    title: 'ID',
+                    width: '50px',
+                    hidden: true,
+                  },
+                  {
+                    dataKey: 'country',
+                    title: '国家',
+                    width: '200px',
+                    ordered: true,
+                    align: 'left',
+                    type: 'money',
+                    delimiter: ',',
+                  },
+                  {
+                    title: '操作',
+                    type: 'action',
+                    width: '300px',
+                    collapseNum: 5,
+                    actions: [
+                      {
+                        title: '新增子行',
+                        callback: (rowData) => {
+                          this.table.addSubRow({
+                            "id": `${setTimeout(0)}`,
+                            "check": true,
+                            "grade": "2grade3",
+                            "email": "2email",
+                            "firstName": "2firstName3",
+                            "lastName": "2lastName3",
+                            "birthDate": "2birthDate3",
+                            "country": `country_${setTimeout(0)}`,
+                            "city": "2city3"
+                          }, rowData, () => {
+                            console.log(this.table.getData())
+                          })
+                        }
+                      },
+                      {
+                        title: '上移',
+                        callback: (rowData) => {
+                          this.table.moveRowUp(rowData);
+                        },
+                      },
+                      {
+                        title: '编辑',
+                        callback: (rowData) => {
+                          this.table.editRow(rowData);
+                        },
+                        mode: Constants.MODE.VIEW,
+                      },
+                      {
+                        title: '删除',
+                        callback: (rowData) => {
+                          this.table.delRow(rowData);
+                        },
+                      },
+                      {
+                        title: '下移',
+                        callback: (rowData) => { this.table.moveRowDown(rowData); },
+                      },
+                    ],
+                  },
+                ]
+              }, () => {
+                this.table.checkRightFixed(true)
+              })
+            }
+          }
+        ]
+      },
+      jsxcolumns: this.state.columns,
       renderModel: 'tree',
       columnResizeable: false,
       toggleTreeExpandOnRowClick: true,
@@ -112,7 +272,7 @@ class Demo extends React.Component {
         this.table = c;
       },
     };
-    return (<Table {...renderProps} className={'kuma-uxtable-border-line'} />);
+    return (<Table ref={c => {this.table = c}} {...renderProps} className={'kuma-uxtable-border-line'} />);
   }
 }
 

diff --git a/demo/index.jsx b/demo/index.jsx
@@ -17,9 +17,9 @@ import Demo5 from './TableGroup';
 import Demo6 from './TableRowGroup';
 import '../style';
 
-ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));
+// ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));
 // ReactDOM.render(<Demo2 />, document.getElementById('UXCoreDemo2'));
-// ReactDOM.render(<Demo3 />, document.getElementById('UXCoreDemo3'));
+ReactDOM.render(<Demo3 />, document.getElementById('UXCoreDemo3'));
 // ReactDOM.render(<Demo4 />, document.getElementById('UXCoreDemo4'));
 // ReactDOM.render(<Demo5 />, document.getElementById('UXCoreDemo5'));
 // ReactDOM.render(<Demo6 />, document.getElementById('UXCoreDemo6'));