【看板展示】【table支持自定义样式】

kanban-client/README.md

@@ -38,6 +38,14 @@
 * bar/line动态新增测试
 * table如果刷新后的数据无改变，不再重新计算滚屏逻辑/chart图同理，可能在动态数据时会有用
 * line数据过多时动态展示
+##### 20170922
+* table支持自定义列头、数据行的全局样式和局部样式
+```定义方法
+headerRowsStyle-------------------全局列头样式
+rowsStyle-------------------------全局数据行样式
+columns[i].headerRowStyle---------指定列列头样式
+columns[i].rowStyle---------------指定列数据列样式
+```
 #### 运行
 * 本地运行
 ```

kanban-client/app/component/Table.jsx

@@ -233,6 +233,8 @@ class TableModel extends React.Component {
 					data={this.state.data || []}
 					getBodyWrapper={this.getBodyWrapper}
 					state={this.state}
+					headerRowsStyle={this.newProps.headerRowsStyle}
+					rowsStyle={this.newProps.rowsStyle}
 				/>
 			</div>
 		);

kanban-client/app/component/converter.js

@@ -66,12 +66,12 @@ function formConfig(model) {
 
 function tableConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, cls, render, columns, data, rowHeight, interval } = config;
+    let { fontSize, title, cls, render, columns, data, pagesize, interval, headerRowsStyle, rowsStyle } = config;
     return {
         type: 'table',
         config: {
             fontSize: fontSize || getFontSize(),
-            rowHeight: rowHeight,
+            pageSize: pagesize,
             refreshInterval: interval,
             title: title,
             render: renderFunction(render),
@@ -83,7 +83,9 @@ function tableConfig(model) {
             data: data.map((v, i) => {
                 v.key = i;
                 return v;
-            })
+            }),
+            headerRowsStyle: parseStyleStr(headerRowsStyle),
+            rowsStyle: parseStyleStr(rowsStyle),
         },
         layout: getLayout(layout)
     }

kanban-client/app/component/factory.dev.js

@@ -5,13 +5,13 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/testline.json';
+import tempdata from '../data/tempdata.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local ';
+        this.dev = 'local';
         this.index = 0;
         this.state = {
             titleHeight: 0,

kanban-client/app/src/Charts/ResetCharts.js

@@ -27,7 +27,6 @@ function resetBarOption(option, node) {
 }
 
 function resetLineOption(option, node, sc) {
-    console.log(node.offsetHeight);
     option.grid.top = node.offsetHeight < 310 ? '35%' : '28%';
     option.grid.bottom = node.offsetHeight < 310 ? '20%' : '16%';
     option.legend.top = node.offsetHeight < 310 ? '20%' : '18%';

kanban-client/app/src/Table/Table.jsx

@@ -40,6 +40,8 @@ export default class Table extends React.Component {
     rowRef: PropTypes.func,
     getBodyWrapper: PropTypes.func,
     children: PropTypes.node,
+    headerRowsStyle: PropTypes.object,
+    rowsStyle: PropTypes.object
   }
 
   static defaultProps = {
@@ -232,6 +234,7 @@ export default class Table extends React.Component {
         key: column.key,
         className: column.className || '',
         children: column.title,
+        style: column.headerRowStyle || this.props.headerRowsStyle || {}
       };
       if (column.children) {
         this.getHeaderRows(column.children, currentRow + 1, rows);
@@ -298,6 +301,7 @@ export default class Table extends React.Component {
       expandedRowRender,
       expandRowByClick,
       rowClassName,
+      rowsStyle,
       rowRef,
       expandedRowClassName,
       onRowClick,
@@ -347,6 +351,7 @@ export default class Table extends React.Component {
           indentSize={props.indentSize}
           needIndentSpaced={needIndentSpaced}
           className={className}
+          rowsStyle={rowsStyle}
           record={record}
           expandIconAsCell={expandIconAsCell}
           onDestroy={this.onRowDestroy}

kanban-client/app/src/Table/TableCell.jsx

@@ -11,6 +11,7 @@ export default class TableCell extends React.Component {
     indentSize: PropTypes.number,
     column: PropTypes.object,
     expandIcon: PropTypes.node,
+    rowStyle: PropTypes.object,
   }
 
   isInvalidRenderCellText(text) {
@@ -27,7 +28,7 @@ export default class TableCell extends React.Component {
 
   render() {
     const { record, indentSize, prefixCls, indent,
-            index, expandIcon, column } = this.props;
+            index, expandIcon, column, rowStyle } = this.props;
     const { dataIndex, render, className = '' } = column;
 
     // We should return undefined if no dataIndex is specified, but in order to
@@ -72,8 +73,9 @@ export default class TableCell extends React.Component {
     return (
       <td
         className={className}
-        {...tdProps}
         onClick={this.handleClick}
+        style={rowStyle}
+        {...tdProps}
       >
         {indentText}
         {expandIcon}

kanban-client/app/src/Table/TableRow.jsx

@@ -27,6 +27,7 @@ export default class TableRow extends React.Component {
     onExpand: PropTypes.func,
     needIndentSpaced: PropTypes.bool,
     className: PropTypes.string,
+    rowsStyle: PropTypes.object,
     indent: PropTypes.number,
     indentSize: PropTypes.number,
     expandIconAsCell: PropTypes.bool,
@@ -137,7 +138,7 @@ export default class TableRow extends React.Component {
     const {
       prefixCls, columns, record, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, indent, indentSize,
+      expandable, onExpand, needIndentSpaced, indent, indentSize, rowsStyle
     } = this.props;
 
     let { className } = this.props;
@@ -182,6 +183,7 @@ export default class TableRow extends React.Component {
           column={columns[i]}
           key={columns[i].key}
           expandIcon={isColumnHaveExpandIcon ? expandIcon : null}
+          rowStyle={columns[i].rowStyle || rowsStyle || {}}
         />
       );
     }