王骏的博客
编程、网络技术点滴...

公告

逐渐将VC知识库的博客迁移到这里!

随笔分类

随笔档案

相册

最新评论

阅读排行榜

评论排行榜

程序员博客   首页  新随笔  订阅  管理  登录 
 
JO2000 阅读(361) 评论(0)

上文介绍了ui-grid鼠标移到某行改变颜色的方法:http://blog.okbase.net/JO2000/archive/56042.html 

本文介绍了鼠标移到某行调用JS函数的方法。

关键的代码是:ng-mouseenter="grid.appScope.rowHover(row,1)"

以及:

$scope.optionGrid.appScopeProvider = {
rowHover: function(row, show) {
}
}

 

详见如下代码:

 

app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
	$scope.optionGrid = {
	paginationPageSizes: [25, 50, 75],
	paginationPageSize: 25,
	columnDefs: [
	  { field: 'id', name: 'ID' },
	  { field: 'type', name: '类型' },
	  { field: 'username', name: '用户名' },
	  { name: '操作', 
	  cellTemplate: '<div class="optcell"><button class="btn primary" ng-click="grid.appScope.rowEdit(row.entity.id)">修改</button><button class="btn primary" ng-click="grid.appScope.rowDelete(row.entity.id)">删除</button></div>'
	  }
	],
	rowTemplate: '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"     ng-mouseenter="grid.appScope.rowHover(row,1)" ng-mouseleave="grid.appScope.rowHover(row,0)" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell"  ng-class="{\'ui-grid-row-header-cell\': col.isRowHeader, \'rowhover\': grid.appScope.hoveredIndex === rowRenderIndex}" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>'
	};

	$scope.optionGrid.appScopeProvider= {
		rowHover: function(row, show) {console.log(row.entity.id+','+show);
		//$scope.row= row.entity;      
		},
		rowEdit: function(id) {console.log(id);
		
		},
		rowDelete: function(id) {console.log(id);
		
		}
	};
}]);

 


发表评论
切换编辑模式