I'm trying out angular ui-grid (http://ui-grid.info) and i cant figure out how to specify a div ID for a selected cell ? When I click on a cell it highlights but I would like some jquery events on click (popup...info...text...etc)
我正在尝试使用角度ui-grid(http://ui-grid.info)并且我无法弄清楚如何为所选单元格指定div ID?当我点击一个单元格时它突出显示但我想点击一些jquery事件(弹出...信息...文本......等)
This is the orig cell selection:
这是原始细胞选择:
<div tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
I'm wondering if possible to get something like:
我想知道是否可能得到类似的东西:
<div id="username-1234" tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
Code:
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = { };
$scope.gridOptions.columnDefs = [
{ field:'fullname', width:150, pinnedLeft: true, displayName: 'Name' },
{ field:'Day01', width:50, displayName: '01' },
{ field:'Day02', width:50, displayName: '02' },
{ field:'Day03', width:50, displayName: '03' },
{ field:'Day04', width:50, displayName: '04' },
{ field:'Day05', width:50, displayName: '05' }
];
Example image of my grid:
我网格的示例图片:
1 个解决方案
#1
2
You can use cellTemplate
您可以使用cellTemplate
Is possible to get something like:
有可能得到类似的东西:
<div id="username-1234" tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
I don't know what is "1234", so use field name like this:
我不知道什么是“1234”,所以使用这样的字段名称:
<div id="username-fieldname" tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
This is the cell template
这是细胞模板
'<div id={{row.entity.name}}-{{col.colDef.name}} class="ui-grid-cell-contents"> {{COL_FIELD CUSTOM_FILTERS}}</div>'
这是Plunker
P.s name of {{row.entity.name}} is field name, in your case is fullname, example like this:
{{row.entity.name}}的名称是字段名称,在您的情况下是全名,例如:
'<div id={{row.entity.fullname}}-{{col.colDef.name}} class="ui-grid-cell-contents"> {{COL_FIELD CUSTOM_FILTERS}}</div>'
#1
2
You can use cellTemplate
您可以使用cellTemplate
Is possible to get something like:
有可能得到类似的东西:
<div id="username-1234" tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
I don't know what is "1234", so use field name like this:
我不知道什么是“1234”,所以使用这样的字段名称:
<div id="username-fieldname" tabindex="-1" class="ui-grid-cell-contents ng-scope ng-binding">Username</div>
This is the cell template
这是细胞模板
'<div id={{row.entity.name}}-{{col.colDef.name}} class="ui-grid-cell-contents"> {{COL_FIELD CUSTOM_FILTERS}}</div>'
这是Plunker
P.s name of {{row.entity.name}} is field name, in your case is fullname, example like this:
{{row.entity.name}}的名称是字段名称,在您的情况下是全名,例如:
'<div id={{row.entity.fullname}}-{{col.colDef.name}} class="ui-grid-cell-contents"> {{COL_FIELD CUSTOM_FILTERS}}</div>'