将超链接文本添加到特定行ui-grid

时间:2015-10-19 13:28:21

标签: javascript html angularjs angular-ui-grid

我有config.json文件,我定义了columnDefs。我想将超链接文本添加到名称字段,并重定向到包含该行信息的页面。我尝试了一些关于SO的例子,但没有成功..

config.json

    "columnDefs":[
      {
        "name": "name"
      },
      {
        "name": "object_type_s"
      }
   ........
    ]

控制器

$scope.gridOptions = {
  columndDefs: config.columnDefs,
  ......

}

如果我将cellTemplate放在配置文件中,就像这样

{
"name": "name",
 "cellTemplate": "<a href="#">"
},

这将在我的网格中的所有行中添加超链接。我想要例如仅向

行添加超链接

$ scope.gridOptions.data.object_type ==“SOMETHING”

1 个答案:

答案 0 :(得分:0)

当您点击名称时,它会带您进入下一页

 $scope.gridOptions = {
            paginationPageSizes : [ 25, 50, 75 ],
            paginationPageSize : 25,
            enableColumnResizing : true,
            enableSorting : true,
            enableRowSelection : true,
            enableSelectAll : true,
            enableRowHeaderSelection: true,
            selectionRowHeaderWidth : 35,
            rowHeight : 35,
        showGridFooter : true,

行模板用于获取ui-grid

上的选定行
        rowTemplate : rowTemplate(),

        columnDefs : [
        {
        field : 'id',
        name : 'id',
        width: 200,
        },
        {   

            field : 'name',
            name  : 'name',
            width : 120,
            sort  : {
                priority : 0,
            },
            cellTemplate:'<div >' + '<a href="test.html">'+ '</a>' + '</div>',
        }
        } ],
          onRegisterApi: function(gridApi){
              $scope.gridApi = gridApi;
        }
    };

当我们选择记录

时会有一行
function rowTemplate() {
    return '<div ng-click="grid.appScope.rowDblClick(row);">' + ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell"  ui-grid-cell></div>' + '</div>';
}

当您单击一行时,您将使用此方法获得一行

$scope.rowDblClick = function(row) {
    console.log('The selected object id is : ', row.entity.id);
    console.log('The selected object nameis : ', row.entity.name);
};