TOGOUTECH

javascript - Angularjs ng-grid动态突出显示行

coder 2025-01-05 原文

我有以下 ng-grid。

  $scope.IssueGrid = {
            data: 'IssueGridList',
            multiSelect: false,
            selectedItems: $scope.selectedRow,
            enableColumnResize: true,
            enableRowSelection: true,
            headerRowHeight: 65,
            columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '7%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
            showFooter: true
        };

此网格具有用于输入“IssueQty”的文本框。但是当输入值时 已发行数量,如果大于“RequiredQuantity”,则应突出显示整行。

谁能提出实现这一目标的方法..

感谢和问候。

最佳答案

考虑使用 rowTemplate(参见 Row Templates ),它使用 ng-classrow.getProperty 来设置“高亮”类对于整行。

rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                       '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                       '<div ng-cell></div>' +
                 '</div></div>'

(function() {
  "use strict";

  angular
    .module("myApp", ['ngGrid'])
    .controller("MyCtrl", ['$scope', MyCtrl]);

  function MyCtrl($scope) {
    $scope.IssueGridList = [
      {Item:'test1', RequiredQuantity:1, IssueQty:0},
      {Item:'test2', RequiredQuantity:2, IssueQty:0}
    ];

    $scope.IssueGrid = {
      data: 'IssueGridList',
      multiSelect: false,
      //selectedItems: $scope.selectedRow,
      enableColumnResize: true,
      enableRowSelection: true,
      showFooter: true,
      columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', width:'25%', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '50%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
        
        rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                           '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                           '<div ng-cell></div>' +
                     '</div></div>'
    };
  }

})();
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px; 
    height: 300px;
}
.highlighted {
  background-color: yellow;
}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="gridStyle" ng-grid="IssueGrid"></div>
</div>

关于javascript - Angularjs ng-grid动态突出显示行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39315269/

有关javascript - Angularjs ng-grid动态突出显示行的更多相关文章

  1. javascript - 不显示 Angular 谷歌地图 - 2

    我正在创建一个应用程序,其中有一个拼车模块。现在我想显示一张map,您可以在map上看到离您最近的拼车者。但是,map不会显示..我正在使用来自的指令http://nlaplante.github.io/angular-google-maps/我已经将google-maps添加到我的依赖项中,指令被替换为googlemap,但它没有显示任何内容。在我看来我有这个指令:我的Controller中有所有变量:$scope.center={latitude:45,longitude:-73};$scope.markers=[];$scope.zoom=8;当我打开firebug时,出现以下错

  2. javascript - 使用 {{expression}} 动态创建 ng-model 不起作用? - 2

    我正在做一个Angular项目,我需要根据一系列问题创建一个表单。我想为数组中的每个问题创建ng-model。所以我想出了类似下面的方法,但它不起作用。{{question.label}}:Required!有人可以帮我解决这个问题吗?提前致谢。 最佳答案 formQuickView[question.label].$error.required这是常规的JavaScript语法。您想要访问formQuickView的属性名称由question.label定义.更新不知何故我错过了要点,ng-model表达。基本上你在这里做同样的事

  3. javascript - 获取表单对象中动态输入元素的值 - 2

    我的问题是:如何在表单中引用输入元素的动态“名称”?例如,使用以下HTML:Javascript:functioncheckVal(form){for(vari=1;i上面的javascript不起作用。警报正在输出NaN。如何使用i变量在for循环中引用qty1、qty2和qty3?这是一个jsfiddle:http://jsfiddle.net/MRzWf/ 最佳答案 使用Bracketnotationform["qty"+i].valuefunctioncheckVal(form){for(vari=1;i

  4. javascript - 刷新元素以显示其新工具提示(在 jQuery/Javascript 中) - 2

    我有一个html元素,当悬停在它上面时,它使用Bootstrap工具提示来显示标题。但是,当您单击此元素时,我正在更改工具提示,但直到我将鼠标从它移开并再次将鼠标悬停在该元素上时,新的工具提示才会显示。我希望在单击所述按钮时立即显示工具提示。我怎样才能做到这一点?有没有办法在没有更好的词的情况下“刷新”html元素? 最佳答案 试试这个演示:http://jsfiddle.net/dreamweiver/9z404crn/$(document).ready(function(){$('#example').tooltip();$('

  5. javascript - 为什么不显示 SVG 使用用 JavaScript 创建的元素? - 2

    我的文档中有一个SVG,我用JavaScript向它添加了一个符号,如下所示:varmyScene=document.getElementById('myScene');varuseSVG=document.createElement('use');useSVG.setAttribute('xlink:href','spriteSheet.svg#mySymbol');useSVG.setAttribute('x','10');useSVG.setAttribute('y','30');useSVG.setAttribute('width','10');useSVG.setAttrib

  6. javascript - Highcharts:如何将动态数据设置为向下钻取饼图? - 2

    我可以使用将数据设置到主饼图vardata=[1,2,3,4,5];//valueofdatawillbereturnedthroughanAJAXcallchart1.series[0].setData(data);同理,如何动态设置下钻数据?我试过chart1.drilldown[0].data='[1,2,3]';但是没有用。我正在使用RESTful服务来公开数据。 最佳答案 您可以使用chart.options.drilldown在运行时访问下钻varnewDrillDowns={id:'mydrilldowns',data

  7. javascript - Vue.js动态挂载单文件组件 - 2

    我有一个单一的文件组件Main.Vue。我还有另外三个单文件组件A.vue、B.vue和C.vue。我希望每次都能在Main.Vue中显示不同的组件。我所做的是:importAfrom'./A.vue';importBfrom'./B.vue';...这可行,但不完全是我想要的。我想要一个不同的文件Factory.js,它会导入所有组件A、B、C,..并且具有返回我的组件的函数,我可以以某种方式在Main.vue中使用它。这是我试过的Factory.js的样子:importAfrom'./A.vue';importBfrom'./B.vue';functiongetComponent(

  8. javascript - 为 react/react-intl 动态导入语言 json 文件 - 2

    这是我配置客户端以通过react-intl呈现正确语言的方式。importlocaleDatafrom'./translations/en.json';//importlocaleDatafrom'./translations/xx.json';{match({history,routes},(error,redirectLocation,renderProps)=>{ReactDOM.render({routes},dest);});};render(getRoutes(store));但是我想根据cookie中的语言环境动态导入localeData。因此,如果我的用户的语言环境是“

  9. javascript - 如何在 Vue JS 中动态渲染组件? - 2

    我正在制作一个表单生成器,它将其中的组件用于输入字段、按钮等。我希望能够根据传递给它的选项生成表单。但我无法让它渲染组件。我试图返回纯HTML,但不会呈现组件。我从我的Home.vue模板调用表单生成器,我希望表单带有这样的选项对象:options:{name:{type:'input',label:'Name'},submit:{type:'button',label:'Send'}}在模板中:在表单生成器组件中,我尝试了多种方法,例如:{{generateForm(this.options)}}//...or...我包括了所有组件,例如:import{FormButton,Form

  10. javascript - 如何使用循环和控制语句在 Javascript 中进行高级字符串模板化 - 2

    基本上在运行时我得到如下数组varcolors=['red','green','blue'];我需要像下面这样构建一个JSON字符串{"color":{"name":"foo","properties":{...}},"green":{"name":"foo","properties":{...}},"blue":{"name":"foo","properties":{...}}}是否有支持循环和控制语句来构建上述JSON字符串的字符串模板框架 最佳答案 Fit.UIs模板引擎简单直观:http://fitui.org/Core-T

随机推荐