更新

src/components/gird/main.css

@@ -61,6 +61,12 @@
 	display: flex;
 }
 
+.tr.active{
+	
+	background-color: #ebf2f7 !important;
+	
+}
+
 .tfoot {
 	width: 100%;
 	height: auto;

src/components/gird/main.js

@@ -118,6 +118,7 @@ export default class menu extends React.Component {
 		],
 		emptyText: "抱歉，暂无相关数据记录",
 		dataCount:23,
+		curIndex:0,
 	
 	}
 
@@ -162,22 +163,27 @@ export default class menu extends React.Component {
 	
 	
     scrollFunc = function (e) {  
-	        e = e || window.event;  
-	        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
-	            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
 			
-	            }  
+		// 	let grid = document.getElementById("grid");
-	            if (e.wheelDelta < 0) { //当滑轮向下滚动时  
+		// 	console.log("当前表格")
+		// 	console.log(grid.offsetWidth)
 		
-	            }  
+	 //        e = e || window.event;  
-	        } else if (e.detail) {  //Firefox滑轮事件  
+	 //        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
-	            if (e.detail> 0) { //当滑轮向下滚动时  
+	 //            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
-	             
+	 //              grid.scrollTo(grid.offsetWidth,0)
-	            }  
+	 //            }  
-	            if (e.detail< 0) { //当滑轮向上滚动时  
+	 //            if (e.wheelDelta < 0) { //当滑轮向下滚动时  
-	                
+	 //              grid.scrollTo(0,0)
-	            }  
+	 //            }  
-	        }  
+	 //        } else if (e.detail) {  //Firefox滑轮事件  
+	 //            if (e.detail> 0) { //当滑轮向下滚动时  
+	 //              grid.scrollTo(grid.offsetWidth,0)
+	 //            }  
+	 //            if (e.detail< 0) { //当滑轮向上滚动时  
+	 //              grid.scrollTo(0,0)
+	 //            }  
+	 //        }  
 	    } 
 	
 	
@@ -185,6 +191,9 @@ export default class menu extends React.Component {
 	
 	componentDidMount() {
 		const dom = ReactDom.findDOMNode(this);
+		console.log("表格")
+		
+		
 		 if(dom.attachEvent){
 		        dom.attachEvent('onmousewheel',this.scrollFunc);
 		 
@@ -374,6 +383,11 @@ export default class menu extends React.Component {
 	  return selectList
 		
 	}
+	rowItemClick(index){
+		console.log(index)
+		
+		this.setState({curIndex:index})
+	}
 
 	
 	render() {
@@ -388,7 +402,7 @@ export default class menu extends React.Component {
 
 			
 	
-		return ( 	<div><div className = "gird" style={{"border": this.props.isBorder ? "1px solid #dfe1e6":"none"}} >
+		return ( 	<div><div className = "gird" style={{"border": this.props.isBorder ? "1px solid #dfe1e6":"none"}} id="grid" >
 			<div className = "th-head"  > {
 				this.props.isMultiple ? ( < div className = "th-td"
 					style = {
@@ -470,7 +484,7 @@ export default class menu extends React.Component {
 						this.state.emptyText
 					} < /div>): (
 					this.state.tableData.map((item, index) => {
-						return ( <div className = "tr"
+						return ( <div className = { this.state.curIndex == index ? "tr active" :"tr"    }  onClick={(e)=>{this.rowItemClick(index)}}
 							style = {
 								{
 									"background": index % 2 == 0 ? this.props.spliteColor : "#ffffff"