UI-Grid 中可点击的列数据

Question

我想让 ui-grid 中的一个单元格内的数据可点击。

这是我的代码：-

InventoryList.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <title></title>
        <style>
            .gridStyle {
                border: 5px solid #d4d4d4;
                height: 200px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
        <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
        <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>   
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />         
        <script src="../Scripts/AngularControllers/InventoryListController.js"></script>   
    </head>
    <body ng-app="appHome">
        <div ng-controller="ctrlInvList">
            <div class="gridStyle" ui-grid="gridInvList">
            </div>

        </div>
    </body>
    </html>

InventoryListController.js

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
    $scope.gridInvList = {
        data: 'invlistdata',
        enableFiltering: true,       
        paginationPageSize: 10,        
        columnDefs: [
            {
                field: 'SiteInventoryNumber', displayName: 'Inventory Number',                 
            },
            { field: 'InventoryTypeName', displayName: 'Inventory Type' },
            { field: 'MakeModel', displayName: 'Make Model' },          
            { field: 'CityName', displayName: 'City Name' },
            { field: 'Specification', displayName: 'Specification' },            
        ]
    }   
}]);

如果我按照此代码进行操作，则网格如下所示：-

但是当我想将 "Inventory Number" 列设置为可点击时，我会引入从互联网上搜索到的以下代码。请看cellTemplate部分

InventoryListController.js

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
    $scope.gridInvList = {
        data: 'invlistdata',
        enableFiltering: true,       
        paginationPageSize: 10,        
        columnDefs: [
            {
                field: 'SiteInventoryNumber', displayName: 'Inventory Number',  
                cellTemplate: '<div ng-click="grid.appScope.foo()" ></div>'
            },
            { field: 'InventoryTypeName', displayName: 'Inventory Type' },
            { field: 'MakeModel', displayName: 'Make Model' },          
            { field: 'CityName', displayName: 'City Name' },
            { field: 'Specification', displayName: 'Specification' },            
        ]
    } 

    $scope.foo = function ()
    {
        alert("Hello");
    }
}]);

这会输出以下结果：-

你能告诉我需要纠正什么才能得到正确的结果吗？

Answer 1

将 ui-grid-cell-contents class 添加到您的单元格模板，您的函数将被触发。 ui-grid 指令之一可能需要 uired。

使用{{COL_FIELD}}显示单元格内容。

默认的单元格模板如下所示： <div class="ui-grid-cell-contents">{{COL_FIELD}}</div>

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.gridInvList = {
    data: [
      {
        SiteInventoryNumber: "INV100001231",
        InventoryTypeName: "test"
      }
    ],
    enableFiltering: true,
    paginationPageSize: 10,
    columnDefs: [{
        field: 'SiteInventoryNumber',
        displayName: 'Inventory Number',
        cellTemplate: '<div ng-click="grid.appScope.foo()" class="ui-grid-cell-contents">{{COL_FIELD}}</div>'
      },
      {
        field: 'InventoryTypeName',
        displayName: 'Inventory Type'
      },
      {
        field: 'MakeModel',
        displayName: 'Make Model'
      },
      {
        field: 'CityName',
        displayName: 'City Name'
      },
      {
        field: 'Specification',
        displayName: 'Specification'
      },
    ]
  }

  $scope.foo = function() {
    alert("Hello");
  }
}]);

.gridStyle {
  border: 5px solid #d4d4d4;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="appHome">
  <div ng-controller="ctrlInvList">
    <div class="gridStyle" ui-grid="gridInvList"></div>
  </div>
</div>

UI-Grid 中可点击的列数据

Column data clickable in UI-Grid

celltemplate

angularjs

angular-ui-grid