给angularJs grid列上添加自定义按钮

由于项目需要在angular 显示的表格中添加按钮,多次查询资料终于找到解决方法。就是给columnDefs 上的列增加 cellTemplate,同时绑定对应的触发事件,代码如下


  columnDefs: [
        enableFiltering : true,
     {name: 'id', displayName: '任务名称', width: '20%',cellFilter:'taskNameConvert'},
{name: 'busType',displayName : '任务类型',width : '20%',cellFilter : 'documentTypeConvert'},
{name : 'status',displayName : '进度',width : '20%',cellFilter : 'statusConvert'},
{name: 'createTime',displayName: '创建时间',width : '20%',cellFilter : 'date : "yyyy-MM-dd hh:mm:ss"'},
/*cellTemplate绑定点击事件必须设置为grid.appScope.方法名*/
{name : 'button',displayName : '功能',width : '18%',cellTemplate : '<div class="ui-grid-cell-contents"><a ng-href="" ng-if="row.entity.status == \'2\'" style="color: #0000cc;" ng-click="grid.appScope.download(row.entity);"下载</a></div>'}
  ],
$scope.download = function(obj){
            window.location.href = 'http://xxxxxxx/' + obj.url;
        };

 

我用到的是a标签,如果需要按钮则将 a 标签换成 button 标签即可。

注意:绑定的事件格式一定要为 grid.appScope.方法名 ,不然方法无法调用,别问我咋知道的。。。

效果图如下:

 

posted @ 2017-03-24 14:05  岁月千年  阅读(3415)  评论(0编辑  收藏  举报