在UI-网格cellTemplate中使用{{COL_FIELD}}
是一种常见的前端开发技术，它用于在网格中显示数据字段的值。
UI-网格(cell)是指在网页或应用程序中以表格形式展示数据的界面元素。而cellTemplate是网格中单元格的模板，用于定义单元格的显示方式。
{{COL_FIELD}}是一种模板语法，用于表示数据字段的值。在实际应用中，通过将{{COL_FIELD}}嵌入到cellTemplate中的相应位置，可以动态地将数据字段的值渲染到网格的单元格中。
这种技术在前端开发中广泛应用于各种数据展示场景，例如表格、列表等。通过使用{{COL_FIELD}}，开发人员可以方便地将数据绑定到UI组件上，使用户能够直观地查看和操作数据。
腾讯云提供了丰富的云计算产品，适用于各种前端开发需求。其中，与UI-网格cellTemplate相关的产品是腾讯云的Serverless框架。Serverless框架提供了快速构建、部署和运行前端应用的能力，可以帮助开发人员更高效地开发和管理网格界面。
更多关于腾讯云Serverless框架的信息，可以访问以下链接：
需要注意的是，在UI-网格cellTemplate中使用{{COL_FIELD}}只是前端开发中的一种技术手段，并不限于特定的云计算品牌。开发人员可以根据实际需求选择适合自己的前端开发技术和相关产品。
相关·内容
对于柱塞链接中的分组ui-网格，第三列，如何让按钮只显示在groupHeader行中？
柱塞：
我尝试在第三列上使用下面的cellTemplate，但是它不起作用，因为第三列不是分组列。
cellTemplate: '<div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row
浏览 2提问于2015-08-18得票数 3
回答已采纳
我正在应用程序中使用新的AngularJS ui网格。我希望创建一个锚点，其中包含从网格中的其他字段获取的参数，作为href属性的一部分，即：
<a href="/BridgeAssess/nhvrRoute/routeAssessor?routeNo={{COL_FIELD CUSTOM_FILTERS}}&journeysId={{grid.routeNo}}&routeVersion={{grid.routeVersion}}" class="create" target="_blank">{{COL_FIELD
浏览 1提问于2014-11-03得票数 1
回答已采纳
我正在使用ui网格显示一个表，在其中我将化身作为第一列。化身图像是根据后端的base64值有条件地显示的col_field图像.
如果col_field为null，则显示base64中的默认图像(在作用域中可用)，否则显示来自col_field本身的图像。
发布：
默认图像在作用域中可用，并正确显示，但我得到控制台错误net::ERR_INVALID_URL。
错误：
数据:image/jpg；base64 64，{COL_FIELD！=null？NqS+jMdu/p7D8dz14x323NdD+uW/+WonqAL75HX/wswAH3/1hmUDbAiAAAAAElFTkSuQmCC&#
浏览 6提问于2016-01-08得票数 0
我使用的是角度ui-网格(来自ui-grid.info)。我有一个ui网格，显示由webapi控制器交付的JSON数据，什么工作得很好。我使用相同的columsDef添加了第二个ui网格，但没有数据。
我希望使用一个按钮将(多个)选定的行从grid1复制到网格2。
如何访问所选内容以将其添加到第二个网格的数据中？
app.js
var app = angular.module('app', ['ui.grid', 'ui.grid.grouping','ui.grid.selection']);
app.controll
浏览 1提问于2015-09-11得票数 2
回答已采纳
1回答
访问ng网格中的选择元素
、、、、
我有这个网格选项：
$scope.ngOptions = {
data: 'data',
columnDefs: [
{field: 'Status', displayName: "Status", cellTemplate: selectTableTemplate, enableCellEdit: true},
{cellTemplate: '<button ng-click="update(col, row)">'
浏览 1提问于2013-11-27得票数 5
1回答
角ui-网格分组标头
、、、
我试图将组标题显示为cellTemplate，这是我使用的模板：
<div class="ui-grid-cell-contents">
<div ng-show="COL_FIELD">
<i class="ace-icon fa fa-check bigger-110 green"></i>
</div>
<div ng-hide="COL_FIELD">
<i class="ace-i
浏览 1提问于2015-05-16得票数 3
回答已采纳
我试图在ui- when的可编辑单元格中实现typeahead。问题是，当我选择typeahead的一个选项时，该值不会反映在该单元格中。
请参阅
这是我的部分代码：
$scope.template2='<div class=""><input style="border: none;" type="text" ' +
'class="typeaheadcontrol"' +
浏览 3提问于2015-04-27得票数 2
在ng网格的editableCellTemplate中，我想使用更方便用户的下拉列表，并且我发现ui-select2 2是一个很好的下拉列表。
但是问题是，当在ng网格中使用该组件时，任何单击都会导致单元格跳转回不可编辑模式。
这样，我就不能使用鼠标选择另一个值(我可以使用键盘上的箭头)。
当我将下拉列表放到cellTemplate中时，它可以工作，但是它也应该在*editable*CellTemplate中工作。
在这里可以找到一些代码来理解我的意思。
有人知道为什么会发生这种情况吗?有什么可以解决的呢？
浏览 2提问于2013-12-17得票数 0
回答已采纳
我一直在签出ng网格，并将columnDefs更改为对某些列使用不同的cellTemplate。此模板不显示实际值，而是在另一个对象中查找它，以便使最终用户(基本上是一个外键id被翻译成人类可以理解的东西)更易读懂。
当我在showGroupPanel: true中启用gridOptions时，您可以将一列拖到“分组”栏中，结果将被分组。
当我使用我编辑模板的列之一执行此操作时，它不会使用我的cellTemplate，并再次显示id。
是否有办法确保，在组的标题中，我也可以使用自己的模板，而不是只显示值的ng网格？
更新一些代码(简化为1列，只显示本质)可能更容易理解(任何代码错误都是键入的，
浏览 5提问于2013-12-10得票数 0
回答已采纳
在ui-grid中对组标题应用过滤器时，它们会消失。当我们在分组操作的结果中使用列脚时，我也遇到了同样的问题(当定义了脚注聚合函数而没有分组时，它可以通过应用的过滤器正确地显示出来)。
col.cellTemplate='<div>{{COL_FIELD | currency:"":0}} </div>';
我必须将其更改为bellow才能使其工作：
col.cellTemplate=
'<div ng-if="!row.groupHeader">{{COL_FIELD | currency:"
浏览 0提问于2017-07-12得票数 2
1回答
UI上单击链接的引导模式
、、、、
在我的UI网格中，下面是我的myController.js文件中的列Defs：
{ field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
{ field: 'trans_s
浏览 2提问于2016-04-25得票数 1
2回答
使用下面的代码，您可以使列可编辑。
cellTemplate: '<input style="width:100%;height:100%;" class="ui-widget input" type="text" ng-readonly="!row.selected" ng-model="COL_FIELD"/>' },
如何使整个网格可编辑？医生说看看维基。维基在哪里？？
浏览 0提问于2013-03-11得票数 0
回答已采纳
对于cellTemplate，我有带有一个ng-if条件的"div“标记和带有其他条件的"a”标记。我想要的是，当行中的选定名称不是"FILE“类型时，转到"div”标签中，而当"FILE“类型时，想要转到"a”标签中，并转到选定的链接。使用这个解决方案，所有内容都放在div标签中。
配置文件，我在其中定义ui网格组件，如下所示
"columnDefs": [
{
"name": "id",
浏览 2提问于2015-10-29得票数 1
我有一个数据模型，看起来像这样：
myData = [{
"ListName": "list1",
"domain\\UserA": true,
"UserB": true,
"userC": true
}, {
"ListName": "list2",
"domain\\UserA": true,
"UserB": true,
"userC": true
}];
我正在尝试绑定到一个ui网格，如下所示
浏览 1提问于2014-12-27得票数 0
我的控制器中有以下代码：
app.controller("homeController", homeController);
homeController.$inject = ["ui.grid.cellNav", "$scope"];
$scope.gridOptions = {
enableRowSelection: true,
enableSelectAll: true,
modifierKeysToMultiSelect: false,
enableRowH
浏览 6提问于2016-03-18得票数 0
回答已采纳
我是ng-grid的新手。我正在学习带有编辑模板选项的ng-grid。我已经创建了具有编辑复选框的网格options.But我不知道在编辑复选框后如何在该网格中获取值？谢谢。
在这里，。
var myapp = angular.module('myapp', ["ui", "ngGrid"]);
myapp.controller('myctrl', function($scope, $http) {
$scope.testInfo= "TestInfo";
$scope.data = {
浏览 2提问于2013-04-29得票数 7
回答已采纳
2回答
只要字段值不是空字符串，我就需要在ui网格中显示一个按钮。我试过使用ng-if，但它不起作用。下面是我的网格选项中的代码：
{ field: 'ReleaseStatus',
width: 125,
displayName: 'Release Status',
cellTemplate:
'<div ng-if="row.entity.ReleaseStatus != """>
<button id="editBtn"
浏览 2提问于2016-05-19得票数 3
回答已采纳
我要传递给ui网格的字段是html片段。就像这样：
<span style="color:BLACK; cursor: pointer; text-decoration: underline;" onclick="openForm(154,68962)">PENDING</span>
用户界面网格显示了单元格内的html代码。我不想显示html，而是显示按下事件的跨度。我试图像这样将它分配给ui网格字段{{ COL_FIELD }}，但是它没有工作：
{ displayName: 'Form Status', field:
浏览 3提问于2015-10-16得票数 1
回答已采纳
在UI-grid单元格模板中使用COL_FIELD值时，我遇到了一些困难。 基本上，我要做的是根据“dateColor”字典中的值为每个单元格设置颜色。 代码如下所示： function getMyServersTableFields(fieldsToShow,dateColor) {
var specificColumnDef = [];
_.each(fieldsToShow, function (item) {
specificColumnDef.push(
浏览 46提问于2019-06-05得票数 2
我对UI网格中的排序功能有问题。目前，我以这种方式接收数据：
{
AccountID : 555,
Teacher: Somename,
SchoolName: 1
},
{
AccountID : 555,
Teacher: Somename,
SchoolName: 2
}
等等。
我用二分法来命名我的学校名称，我用以下方式来想象它们：
if ( memberData.type == "dictionary" ) {
columnDef.cellTemplate =
'<div class="ui-grid-cell-contents"&g
浏览 0提问于2017-02-25得票数 0
我正在尝试获取网格中一列整数的总和。当我在gridOptions中将aggregationValue设置为时，为什么它是undefined
{ field: 'premium', name: 'Premium', width: '*', aggregationType: uiGridConstants.aggregationTypes.sum, aggregationHideLabel: true, cellTemplate: '<div class="ui-grid-cell-contents">${{COL
浏览 6提问于2018-02-23得票数 0
回答已采纳
我知道如何在ng网格单元格的editableCellTemplate中有一个工作的UI-引导-数据报警器。
我的问题是:当我用enableCellEdit=true (单击单元格编辑)替换enableCellEditOnFocus=true选项时，它不再起作用了。有没有人知道它为什么坏了，以及如何解决这个问题？
var editableCellTemplateUsingDatePicker = '<input ng-class="\'colt\' col.index" datepicker-popup="dd.MM.yyyy" da
浏览 2提问于2015-05-08得票数 1
回答已采纳
花了很多时间，我不能理解为什么ui网格要填充整个表中数组的最后一个对象。
$scope.gridOptions = {
rowHeight:50,
paginationPageSizes: 0,
paginationPageSize: 5
//paginationCurrentPage: 2
};
function pageNumberOrPageSizeChanged(pageNumber, pageSize)
{
console.log("Received: pageNumber
浏览 3提问于2017-01-26得票数 1
1回答
我正在使用angular-ui-grid v3.0.0-rc.22-e8fe073和bootstrap工具提示在网格中使用ui.bootstrap。
请在下面找到工具提示模板如下：
var templateWithTooltip = '<div class="ui-grid-cell-contents"><a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement="right" st
浏览 2提问于2015-10-13得票数 1
尝试在uigrid中获得我的列的值的聚合。我已经将uiGridConstants注入控制器，并且在我的app.js中有ui.grid...然而，不管我做了什么，uiGridConstants都被作为未定义的内容传回。有人知道吗？
GridOptions
$scope.gridOptions = {
infiniteScrollRowsFromEnd: '50',
selectionRowHeaderWidth: '100',
enableColumnMenus: false,
rowHeight: '45',
enableFi
浏览 2提问于2018-02-22得票数 0
回答已采纳
1回答
我想将ui网格中的一个单元格内的数据作为可点击的。
这是我的密码：-
InventoryList.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px
浏览 2提问于2017-08-03得票数 0
回答已采纳
在我的项目中使用ui-grid，我将从DB获得JSON对象，如下所示
[
{
"checkbox1": {
"fieldName": "checkbox1",
"fieldValue": "Y"
},
"checkbox2": {
"fieldName": "checkbox3",
"fieldValue
浏览 2提问于2016-02-04得票数 1
回答已采纳
用角度-UI-网格.我有以下数据(分页)：
名称链接A>显示隐藏B>显示隐藏
In my options:
cellTemplate:'<div>' +
' <a ng-click="grid.appScope.show(row)">Show</a> <a ng-click="grid.appScope.hide(row)">Hide' +'</div>' }
如果单击"Show"，就
浏览 2提问于2016-03-03得票数 0
回答已采纳
我在ui网格中有几种独特的情况，其中某些表内容的单元格需要额外的类，甚至需要指定样式规则，因此这些单元格的外观与其他单元格相比非常突出。通过查看正式的ui网格文档，我发现它可以用cellTemplate完成，但是我无法获得任何一致的结果。这里最好的方法是什么？
下面是我之前尝试过的代码更改，目的是根据筛选器调用返回的值更改类名。
//Define Grid Headings
$scope.scheduledPatientAppointments = [
{
field: 'appointment_date',
di
浏览 5提问于2016-09-27得票数 0
我有简单的控制器：
angular.module('it.works', ['ngResource'])
.controller 'ItWorksCtrl', ($scope, Task) ->
$scope.worksTable = {
data: Task.query(),
columnDefs: [
{ field: "created_at", cellFilter: "date:'dd.MM.yyyy'", displayName:
浏览 2提问于2015-09-02得票数 5
回答已采纳
当在列定义中包含cellTemplate时，如果该cellTemplate包含CUSTOM_FILTERS，则会导致angular执行puke：
错误:语法错误:从CUSTOM_FILTERS开始的表达式row.entity.1 CUSTOM_FILTERS的第14列中，标记'CUSTOM_FILTERS‘是意外的标记
即使在列def中使用默认的cellTemplate也会导致相同的错误。
cellTemplate = "<div class=\"ngCellText\" ng-class=\"col.colIndex()\"><
浏览 1提问于2013-09-06得票数 4
1回答
我的mvc应用程序中有以下视图和控制器。我有一个按钮(“获取过滤行”)，我想在控制器中调用getFilteredRows()函数。我尝试了多个组合的东西来让按钮调用函数，但我似乎无法让按钮调用它。我不明白为什么这个函数没有被按钮调用。帮助?
@using ProjectExplorer.Web.Helpers
@model ProjectExplorer.Web.ViewModels.IProjectHeaderViewModel
@{
var projects = Model.ProjectHeaders;
}
<div>
<div class="
浏览 7提问于2016-11-03得票数 0
回答已采纳
在本论坛成功地回答了我的第一个问题之后，我高兴地提出另一个问题。我使用Brian的计量学在ui网格中使用了一个ui-select。也许我没有正确地实现，但我有一个问题:如何才能让单元格显示从下拉列表中选择的值，而不是数据库中输入的值。例如
用于网格选项的列：
{ field: 'projectorebody_id',
name: 'projectorebody_id',
displayName: 'Select',
cellTemplate: '../app/vi
浏览 0提问于2015-11-13得票数 0
回答已采纳
1回答
我用下面的JSON构建了一个ng-grid
[{"TankName":"Tnk1","UseFuel":"100","UnusedFuel":"200"},
{"TankName":"Tnk2","UseFuel":"150","UnusedFuel":"600"},
{"TankName":"TOTAL","UseFuel":"0",
浏览 0提问于2014-09-17得票数 0
我在ui网格中使用分组功能，但是我想按taskId而不是taskName分组，因为taskNames在我的项目中并不是唯一的。所以我做了这个，
$scope.gridOptions.columnDefs = [
{
field:'taskId',
displayName:'Task Name',
cellTemplate:'<span>{{row.entity.taskName}}</span>'
grouping:{
groupingPriority:0
}
浏览 2提问于2015-07-06得票数 2
回答已采纳
1回答
向ng网格添加占位符
、、、
我有一个可编辑的网格。如何向空单元格中添加占位符(在编辑单元格时它们应该消失)？
我知道输入标签是可能的：
<input type="text" placeholder='Type something here'>
浏览 2提问于2014-04-29得票数 0
1回答
我在UI-网格中有一个linq模板单元。控制器中的代码：
var Station = '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.entity.station.href}}">{{row.entity.station.text}}</a></div>';
and
columnDefs: [
{ name: 'Stat
浏览 3提问于2015-09-15得票数 2
回答已采纳
上一列的浮动文本是右对齐的，该列上的文本是左对齐的。这些是来自角度UI网格的属性。为了提高可读性，我需要在其中一列的文本开头添加一个10 of空间。
如果文本是"ABC"，则必须显示为“ABC"。
我有以下代码。
{
name: 'BldgScheme',
field: 'BldgScheme',
width: 100,
cellTemplate: '<div ng-if="!row.entity.editrow">{{COL_FIELD}}</div>&l
浏览 2提问于2018-09-05得票数 1
我正在使用angularjs网格，我的代码中有一个名为status的字段，用户可以通过单击按钮将状态更新为Active或InActive。
更新后，我可以刷新数据，但是单元模板:条件不会被触发。我正在使用下面的方法刷新ui网格
$scope.gridOption.data=data;
$scope.gridOptionApi.core.refresh();
但是，这只是刷新我的数据，它不检查我在纤维素体中添加的条件，如下所示
{field: 'profileId', displayName: 'Change Status',cellTemplate:'
浏览 3提问于2017-06-02得票数 1
回答已采纳
1回答
我尝试在ng网格的列标题中实现一个复选框。这样做的目的是能够选中或取消选中给定列中的所有复选框。由于我希望将来有多个这样的列，所以我不想通过ng网格使用行选择复选框功能。
现在，如果你运行柱塞代码..。如果您选中并取消选中行/数据部分中的复选框，则一切似乎都正常，这意味着如果选中所有复选框，标题中的复选框也将被选中。
一旦您通过mouseclick选中或取消选中标头中的复选框，这将不再有效。
复制步骤：
在柱塞上运行脚本
选中网格行中的每个复选框(而不是标题行中的复选框)
你会看到，标题复选框将被自动选中(这就是我想要的)。
单击标题中的复选框，取消选中所有复选框
重复步骤
浏览 0提问于2014-10-10得票数 0
回答已采纳
0回答
我有以下单元格模板行：{{COL_FIELD |cellTemplate。实体。过滤器}}
但是文件管理器不工作。如果我在模板中直接作为字符串传递，那么它是有效的。但在我的例子中，文件管理器是动态的。
有谁能帮忙吗？
浏览 18提问于2017-01-09得票数 2
1回答
我有一个有几行的ui网格。我添加了一个带有链接的列，以访问该行的详细信息，并在一个新的(angularjs)视图中显示它。新视图从http.get命令中获取数据。是否有任何方法将“所选行”参数传递到新视图，以便http.get获得正确的详细信息？目前我使用MVC路由，因此在两个角部分之间有一个控制器。
Ui-Grid：
$scope.gridOptions2 = {
enableFiltering: true,
treeRowHeaderAlwaysVisible: false,
rowHeight: 100,
columnD
浏览 3提问于2015-10-02得票数 0
2回答
UI网格-自定义单元模板代码分离
、、、、
我正在尝试使用UI网格中的cellTemplates自定义单元格。为此，我在.js文件中定义模板，如下所示：
var template1 = '<div class="div1">{{COL_FIELD}}</div>';
var template2 = '<div class="div2">{{COL_FIELD}}</div>';
var template3 = '<div class="div3">{{COL_FIELD}}</di
浏览 0提问于2015-07-08得票数 3
回答已采纳
如何在下面的ui-grid cellTemplate中显示数据时添加条件：
$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
columnDefs: [{
field: 'code'
}, {
field: 'name'
}, {
field: 'status',
cellTemplate: '<d
浏览 19提问于2014-11-01得票数 15
回答已采纳
1回答
我为我的数据网格中的每一行使用了一个单元格模板。如果我用索引限定json对象，那么值就会正确显示，当然，每一行的值都是相同的。如果删除索引，则显示的所有行都具有相同的值，但值是一个数组。
- js文件( function () { angular.module('xxxSurvey').controller('EditxxxSurveyController'，EditxxxSurveyController)；编辑xxxSurveyControler.$inject= '$scope'，'UserFacilityListService
浏览 1提问于2016-01-18得票数 0
下面是一个按要求的柱塞-
我使用的是控制器的模式。我一直在使用带有过滤器($sce)的单元格模板进行消毒，然后构建HTML。为了我的生命，我不能让ng-点击注册到我的控制器。
我可以将单元模板更改为cellTemplate:'<button ng-click="grid.appScope.user.delete(\'works!\')">X</button>'->。
是否存在不使用单元格模板而仍然到达控制器的情况？详细信息栏是我有问题的地方。
感谢您的阅读！
相关问题-
这是密码-
var us
浏览 3提问于2016-07-08得票数 3
回答已采纳
2回答
我和用户界面网格()一起使用角。
我已经使用下面的选项设置了网格
this.mdGridLogOptions.gridOptions= {
enableSorting: false,
enableColumnMenus: false,
enableAutoFitColumns: false,
paginationPageSizes: [25, 50, 100, 200, 500],
enableFiltering: true,
enableGridMenu: false,
enableCellEditOnFocus: true,
columnDefs: [
{
field: '
浏览 0提问于2016-10-23得票数 1
我可能误解了什么，但这是我的问题，。
无论如何，我把相关代码放在这里：
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
var cellNameEditable =
'<cell-template model=COL_FIELD input=COL_FIELD entity=row.entity></cell-template>';
var cellNam
浏览 1提问于2014-02-14得票数 1
4回答
我在试着把Ui-网格转换成角，但我做不到。我只想翻译一下columnDefs。
这里是我的控制器:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'نمایش', cellClass: "editCell", cellTemplate: '<i id="editBtn" tooltip-placement="left" tooltip="نمایش د
浏览 7提问于2015-04-14得票数 4
我正在尝试将editableCellTemplate ColumnDef选项设置在ng网格()中。
当我设置它时，即使设置为默认值<input ng-class="'colt' + col.index" ng-input="COL_FIELD" />，单击单元格也会立即产生错误。
错误:无控制器: ngModel at getControllers () at nodeLinkFn () at compositeLinkFn () at compositeLinkFn () at publicLinkFn () at Object。
浏览 1提问于2013-08-23得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
