![grid双击行不起作用]( "grid双击行不起作用")
本文介绍了angular js ui-grid双击行不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我想在双击 ui-grid 行时调用函数 myFunc.为此我使用了
但它没有被调用并且没有显示错误.
这里是 html 的调用部分:
这里是js脚本:
var myData = [{name: "Moroni", age: 50},{name: "Tiancum", 年龄: 43},{名称:雅各"，年龄:27}，{名称:尼腓"，年龄:29}，{名称:以诺斯"，年龄:34}];var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection']);app.controller('MainCtrl', function($scope) {$scope.data = myData;$scope.mySelections = [];$scope.gridOptions = {数据:'数据'，selectedItems : $scope.mySelections,enableRowSelection: 真，//启用全选:真，selectionRowHeaderWidth: 35,行高:35，showGridFooter:true,enableRowHeaderSelection :false,多选:假，启用全选:假，enableFullRowSelection:true,//noUnselect: 真}$scope.myFunc = 函数 (){alert('你双击了！');};....});
解决方案
应该这样做:
var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);app.controller('MainCtrl', ['$scope', function($scope) {var dblClickRowTemplate =//与普通模板相同，但使用 ng-dblclick="grid.appScope.myFunc()""<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ng-dblclick=\"grid.appScope.myFunc()\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ?'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";$scope.gridOptions = {行模板:dblClickRowTemplate，//selectedItems: $scope.mySelections,enableRowSelection: 真，//启用全选:真，selectionRowHeaderWidth: 35,行高:35，showGridFooter: 真,enableRowHeaderSelection: 假，多选:假，启用全选:假，enableFullRowSelection: 真，数据:[{名称:莫罗尼"，年龄:50}，{name: "Tiancum", 年龄: 43},{名称:雅各"，年龄:27}，{名称:尼腓"，年龄:29}，{名称:以诺斯"，年龄:34}]}$scope.myFunc = function() {alert('你双击了！');};}]);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css"/><div ng-app="app" ng-controller="MainCtrl"><div ui-grid="gridOptions" ui-grid-selection class="gridStyle">
如果您有任何其他问题，请告诉我.
I want to call a function myFunc on doubleclick of ui-grid row.for that I have used
<ng-dblclick="grid.appScope.myFunc()">
but it is not being called and showing no error.
here is the calling part of html :
<div ui-grid="gridOptions" ui-grid-selection class="gridStyle"
ng-dblclick="grid.appScope.myFunc()">
</div>
and here is the js script:
var myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', function($scope) {
$scope.data = myData;
$scope.mySelections = [];
$scope.gridOptions = {
data :'data',
selectedItems : $scope.mySelections,
enableRowSelection: true,
//enableSelectAll: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter:true,
enableRowHeaderSelection :false,
multiSelect:false,
enableSelectAll:false,
enableFullRowSelection:true,
// noUnselect: true
}
$scope.myFunc = function ()
{
alert('you double clicled!');
};
.
.
.
.
});
解决方案
This should do it:
var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', function($scope) {
var dblClickRowTemplate =
//same as normal template, but with ng-dblclick="grid.appScope.myFunc()"
"<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ng-dblclick=\"grid.appScope.myFunc()\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
$scope.gridOptions = {
rowTemplate: dblClickRowTemplate,
//selectedItems: $scope.mySelections,
enableRowSelection: true,
//enableSelectAll: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter: true,
enableRowHeaderSelection: false,
multiSelect: false,
enableSelectAll: false,
enableFullRowSelection: true,
data: [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}]
}
$scope.myFunc = function() {
alert('you double clicled!');
};
}]);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-selection class="gridStyle">
</div>
</div>
Let me know if you have any further questions.
这篇关于angular js ui-grid双击行不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..