代码之家 › 专栏 › 技术社区 › simple user

可在UI网格中单击的列数据

celltemplate angular-ui-grid angularjs

0

simple user · 技术社区 · 7 年前

我想让ui网格中一个单元格内的数据成为可点击的。

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>

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部分

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");
    }
}]);

这将输出以下结果:-

你能告诉我为了得到正确的结果需要纠正什么吗?

1 回复 | 直到 7 年前

1

Jaydo 7 年前

添加 ui-grid-cell-contents

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