我有以下 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-class
和 row.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 }"> </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 }"> </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/
我正在创建一个应用程序,其中有一个拼车模块。现在我想显示一张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时,出现以下错
我正在做一个Angular项目,我需要根据一系列问题创建一个表单。我想为数组中的每个问题创建ng-model。所以我想出了类似下面的方法,但它不起作用。{{question.label}}:Required!有人可以帮我解决这个问题吗?提前致谢。 最佳答案 formQuickView[question.label].$error.required这是常规的JavaScript语法。您想要访问formQuickView的属性名称由question.label定义.更新不知何故我错过了要点,ng-model表达。基本上你在这里做同样的事
我的问题是:如何在表单中引用输入元素的动态“名称”?例如,使用以下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
我有一个html元素,当悬停在它上面时,它使用Bootstrap工具提示来显示标题。但是,当您单击此元素时,我正在更改工具提示,但直到我将鼠标从它移开并再次将鼠标悬停在该元素上时,新的工具提示才会显示。我希望在单击所述按钮时立即显示工具提示。我怎样才能做到这一点?有没有办法在没有更好的词的情况下“刷新”html元素? 最佳答案 试试这个演示:http://jsfiddle.net/dreamweiver/9z404crn/$(document).ready(function(){$('#example').tooltip();$('
我的文档中有一个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
我可以使用将数据设置到主饼图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
我有一个单一的文件组件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(
这是我配置客户端以通过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。因此,如果我的用户的语言环境是“
我正在制作一个表单生成器,它将其中的组件用于输入字段、按钮等。我希望能够根据传递给它的选项生成表单。但我无法让它渲染组件。我试图返回纯HTML,但不会呈现组件。我从我的Home.vue模板调用表单生成器,我希望表单带有这样的选项对象:options:{name:{type:'input',label:'Name'},submit:{type:'button',label:'Send'}}在模板中:在表单生成器组件中,我尝试了多种方法,例如:{{generateForm(this.options)}}//...or...我包括了所有组件,例如:import{FormButton,Form
基本上在运行时我得到如下数组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