0

我想让 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' },            
        ]
    }   
}]);

如果我通过这段代码，那么网格如下所示： -

在此处输入图像描述

但是，当我想将“库存编号”列设为可点击时，我会引入以下代码，这些代码是从互联网上搜索的。请查看 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");
    }
}]);

这将输出以下结果：-

在此处输入图像描述

您能否让我知道需要纠正什么才能获得正确的结果？

4

1 回答 1

1

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

用于{{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>

于 2017-08-03T04:53:26.613 回答