给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.方法名 ,不然方法无法调用,别问我咋知道的。。。
效果图如下: