Question

我可以获得一个示例celltemplate，如果更改了单元格值，则应在ng-grid中将单元格颜色更改为红色或黄色。如果不是细胞模板，那么任何方式都可以。应该知道如何实现这个目标吗？

提前致谢。

Answer 1

这就是我为你所尝试的。我已将更改放在第二列的gridOptions2上。

please see this Plunker

Demo

这也只是关键选项，你可以从我的代码中得到一个想法。

更新1：

Please click this for what you want the result :

Demo

更新2

只需复制并通过我的代码

<!DOCTYPE html>
<html ng-app="myApp">


<head>
  <link data-require="ng-grid@*" data-semver="2.0.14" rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
  <script data-require="ng-grid@*" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
  <script data-require="ng-grid@*" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/plugins/ng-grid-flexible-height.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <style>
    /*style.css*/
    .parameterGrid {
      border: 1px solid rgb(212, 212, 212);
      width: 99%;
      height: 600px;
    }
    .parameterEditGrid {
      border: 1px solid rgb(212, 212, 212);
      width: 99%;
      height: 600px;
    }
  </style>


</head>

<body ng-controller="myAppCtrl">
  <br/>
  <label class="hpppLbl"><strong>Filter:</strong> 
  </label>
  <input type="text" ng-model="filterOptions.filterText" />
  <br/>
  <table width=100%, style="height:650px;">
    <tr>
      <td width="70%">
        <div class="parameterGrid" ng-grid="parameterGrid"></div>
      </td>
      <td>
        <div class="parameterEditGrid" ng-grid="parameterEditGrid">
          <button type="submit" data-ng-disabled="changes.length <= 0" ng-click="checkChange()">Save</button>
        </div>
        <td>
    </tr>
  </table>

  <script>
    // Code goes here


    // Initializing the AngularJs
    var app = angular.module('myApp', ['ngGrid']);

     // Defining a Controller in AngularJs
    app.controller('myAppCtrl', function($scope, $http) {
      $scope.parameterSelections = []; // Declare an array to handle the selected values in the grid
      $scope.filterOptions = { // Filtering options in the Grid
        filterText: ''
      };

      // Get the JSON data from the web service
      $http.get('http://www.w3schools.com/website/Customers_JSON.php').success(function(thisdata) {
        //Convert data to array.
        $scope.parameterData = angular.fromJson(thisdata);
      });
      $scope.cellInputEditableTemplate = '<input ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-blur="updateEntity(row)" />';
      // Define and design a ng-grid
      $scope.parameterGrid = {
        data: 'parameterData',
        enableColumnResize: true,
        rowHeight: 40,
        headerRowHeight: 40,
        maxWidth: '500px',
        minWidth: '50px',
        filterOptions: $scope.filterOptions, // Provide the filter options for the Grid
        showColumnMenu: true,
        selectedItems: $scope.parameterSelections,
        multiSelect: false,
        enableCellEditOnFocus: true,
        cellClass: 'gridFonts',
        afterSelectionChange: function(rowItem) {
          if (rowItem.selected) {
            //write code to execute only when selected.
            var contentId = 1;
            var detailData = [];
            angular.forEach(rowItem.entity, function(value, key) { // looping through a selected row and getting the data ready for the details grid
              var editFlag = false;
              if (key.toLowerCase() == "city") {
                editFlag = true;
              }
              var dataRow = {
                col1: firstToUpperCase(key),
                col2: value,
                col3: editFlag,
                contentId: contentId
              }; // Assigning key value to Col1 & Col2 in the array
              detailData.push(dataRow);
              contentId++;
            });

            $scope.detailsGridData = detailData; // Put the data to the Details grid
          } else {
            //write code on deselection.
          }
        },
        // Defining Columns
        columnDefs: [{
          field: 'Name',
          displayName: 'Name',
          enableCellEdit: false
        }, {
          field: 'City',
          displayName: 'City',
          enableCellEdit: false
        }, {
          field: 'Country',
          displayName: 'Country',
          enableCellEdit: false
        }]
      };
var selectedOption="";
      // Define and design a ng-grid
      $scope.parameterEditGrid = {
        data: 'detailsGridData',
        enableRowSelection: false,
        enableColumnResize: true,
        headerRowHeight: 0,
        rowHeight: 40,
        enableCellEditOnFocus: true,
        multiSelect: false,
        // Defining the columns of Details Grid
        columnDefs: [{
          field: 'col1',
          displayName: 'Field Name',
          enableCellEdit: false,
          cellClass: 'rightColGridStyle'
        }, {
          field: 'col2',
          displayName: 'Field Value',
          cellClass: 'leftColGridStyle',
          enableCellEdit: false,
          cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.col3">{{row.getProperty(col.field)}}</div>' +
            '<div ng-show="row.entity.col3" class="ngCellText"><input style="background-color:{{colorCell}}" ng-change="colorchange(this)" type="text"  ng-model="row.entity.col2"/></div></div>'
        }]
      };

      // Function to make the first letter of the word passed to caps.
      function firstToUpperCase(str) {
        return str.substr(0, 1).toUpperCase() + str.substr(1);
      }

      // Function that is called after the edit of the grid is done.
      $scope.$on('ngGridEventEndCellEdit', function(data) {


      });

      $scope.colorchange = function(contex) {
        contex.colorCell="red";
        selectedOption=contex;
      };

      $scope.changes = [];

      $scope.$watch('detailsGridData', function(newVal, oldVal) {
        for (var i = 0; i < oldVal.length; i++) {
          if (!angular.equals(oldVal[i], newVal[i])) {

            var indexOfOld = $scope.indexOfExisting($scope.changes, 'contentId', newVal[i].contentId);

            if (indexOfOld >= 0) {
              $scope.changes.splice(indexOfOld, 1);
            }

            $scope.changes.push(newVal[i]);
          }
        }
      }, true);

      $scope.checkChange = function() {
        for (var i = 0; i < $scope.changes.length; i++) {
          console.log($scope.changes[i].name);
          //putEntity($scope.changes[i])
        }
        $scope.changes = [];
        selectedOption.colorCell="none";
      };

      $scope.indexOfExisting = function(array, attr, value) {
        for (var i = 0; i < array.length; i += 1) {
          if (array[i][attr] === value) {
            return i;
          }
        }
      };





    });


  </script>
</body>



</html>

在ng-grid中更改值时更改单元格的颜色

1 个答案:

please see this Plunker

Demo

更新1：

Demo

更新2