Merge 60e8bed into b815bdd

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(): 使所有行切换到编辑模式。

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: '200px',
-        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',
       toggleTreeExpandOnRowClick: true,
       rowSelection: {
@@ -111,7 +271,7 @@ class Demo extends React.Component {
         this.table = c;
       },
     };
-    return (<Table {...renderProps} />);
+    return (<Table ref={c => {this.table = c}} {...renderProps} className={'kuma-uxtable-border-line'} />);
   }
 }
 

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'));

doc/README_EN.md

@@ -213,6 +213,10 @@ let columns = [
 
 ## API
 
+* addSubRow(rowData, jsxid, cb): add an sub row with specified data in tree table from bottom
+* addSubRowFromTop(rowData, jsxid, cb): add an sub row with specified data in tree table from top
+
+
 ### Row Editing
 
 * getData(): return cellData & do Validation

src/ActionBar/ColumnOrder.jsx

@@ -23,13 +23,13 @@ class ColumnOrder extends React.Component {
     this.state = {
       value: props.defaultValue,
       preColumns: props.columns,
-      checkAbleColumns: getColumnsInfo(props.columns, props.includeActionColumn),
+      checkAbleColumns: getColumnsInfo(props.columns, props.includeActionColumn, true),
     }
   }
   static getDerivedStateFromProps = (props, state) => {
     if (props.columns !== state.preColumns) {
       return {
-        checkAbleColumns: getColumnsInfo(props.columns, props.includeActionColumn),
+        checkAbleColumns: getColumnsInfo(props.columns, props.includeActionColumn, true),
         preColumns: props.columns
       };
     }
@@ -76,7 +76,8 @@ class ColumnOrder extends React.Component {
   }
   render() {
     const p = this.props;
-    const disabled = !p.keepActiveInCustomView && !p.isTableView
+    const { checkAbleColumns } = this.state;
+    const disabled = !p.keepActiveInCustomView && !p.isTableView || !checkAbleColumns.columns.length;
     return (
       <Popover
         overlay={!disabled ? this.renderDragList() : <div/>}