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

最新推荐文章于 2023-10-10 16:56:22 发布

weixin_34235457

最新推荐文章于 2023-10-10 16:56:22 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suiyueqiannian/p/6611220.html

本文介绍如何在Angular项目中实现表格内的按钮功能，并绑定点击事件。通过设置cellTemplate并指定grid.appScope.方法名来实现。

由于项目需要在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.方法名，不然方法无法调用，别问我咋知道的。。。

效果图如下：

转载于:https://www.cnblogs.com/suiyueqiannian/p/6611220.html