Browse Source

设置table边框不占宽度,同时调整行高计算/table字体统一根据屏幕宽度计算

zhuth 8 years ago
parent
commit
8cdad1f269

+ 1 - 0
kanban-client/app/assets/Table/index.css

@@ -37,4 +37,5 @@
   text-overflow: ellipsis;
   overflow: hidden;
   border: 1px solid white;
+  box-sizing: border-box;
 }

+ 1 - 0
kanban-client/app/assets/Table/index.less

@@ -45,5 +45,6 @@
         text-overflow: ellipsis;
         overflow: hidden;
         border: 1px solid white;
+        box-sizing: border-box;
     }
   }

+ 1 - 1
kanban-client/app/component/Layout.dev.js

@@ -30,7 +30,7 @@ class BasicLayout extends React.Component {
     items: [],
     onLayoutChange: (l) => { },
     cols: 10, // 屏幕横宽最大值
-    margin: [1, 1], // 元素间隔
+    margin: [0, 0], // 元素间隔
     verticalCompact: false, // 垂直方向贴靠
     useCSSTransforms: false, // 使用动画
     autoSize: true //自适应

+ 1 - 1
kanban-client/app/component/Layout.js

@@ -30,7 +30,7 @@ class BasicLayout extends React.Component {
     items: [],
     onLayoutChange: (l) => { },
     cols: 10, // 屏幕横宽最大值
-    margin: [1, 1], // 元素间隔
+    margin: [0, 0], // 元素间隔
     verticalCompact: false, // 垂直方向贴靠
     useCSSTransforms: false, // 使用动画
     autoSize: true //自适应

+ 8 - 7
kanban-client/app/component/Table.jsx

@@ -89,9 +89,10 @@ class TableModel extends React.Component {
 		let node = this.refs.body;
 		let title = node.getElementsByClassName('rc-table-title')[0] || { offsetHeight: 0 };
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
-		this.cHeight = node.offsetHeight - 4  - title.offsetHeight; // 这里的4是上下padding和border
+		this.cHeight = node.offsetHeight - title.offsetHeight;
 		let trHeight = (this.cHeight) / (this.rowCount + 1);
-		let trFontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
+		// let trFontSize = pageSize ? `${fontSize/.6 > trHeight ? trHeight * .6 : fontSize}px` : `${trHeight * .6}px`;
+		let trFontSize = `${fontSize}px`;
 		thead.style.fontSize = trFontSize;
 		thead.getElementsByTagName('th')[0].style.height = `${trHeight}px` ;
 		let count = this.state.data.length;
@@ -129,10 +130,10 @@ class TableModel extends React.Component {
 				let oldTds = oldTrs[i].getElementsByTagName('td');
 				for (let j = 0; j < oldTds.length; j++) {
 					// 设置旧td=新td宽度
-					oldTds[j].style.maxWidth = `${newTds[j].offsetWidth - 2}px`;
-					oldTds[j].style.minWidth = `${newTds[j].offsetWidth - 2}px`;
-					oldTds[j].width = newTds[j].offsetWidth - 2;
-					oldTds[j].height = newTds[j].offsetHeight - 2;
+					oldTds[j].style.maxWidth = `${newTds[j].offsetWidth}px`;
+					oldTds[j].style.minWidth = `${newTds[j].offsetWidth}px`;
+					oldTds[j].width = newTds[j].offsetWidth;
+					oldTds[j].height = newTds[j].offsetHeight - 2; 
 				}
 			}
 		}
@@ -241,7 +242,7 @@ class TableModel extends React.Component {
 	render() {
 		const { fontSize } = this.newProps;
 		return (
-			<div ref='body' style={{ height: '100%', overflow: 'hidden', fontSize: fontSize }}>
+			<div ref='body' style={{ height: '100%', overflow: 'hidden', fontSize: fontSize, padding: '0px' }}>
 				<Table
 					prefixCls={this.newProps.prefixCls || 'rc-table'}
 					className={this.newProps.className}

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

@@ -163,7 +163,7 @@ class Factory extends React.Component {
         return (
             <div ref='body'>
                 <Title static={this.props.static} {...titleConfig} />
-                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10 - 1} />
+                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
             </div>
         );
     }

+ 1 - 1
kanban-client/app/component/factory.js

@@ -150,7 +150,7 @@ class Factory extends React.Component {
         return (
             <div>
                 <Title static={this.props.static} {...titleConfig} />
-                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10 - 1} />
+                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
             </div>
         );
     }

+ 1 - 1
kanban-client/app/data/cc.json

@@ -164,7 +164,7 @@
                                     "dataIndex": "原因" 
                                 }
                             ],
-                            "pagesize": 5,
+                            "pagesize": 0,
                             "interval": 2
                         }
                     },