在ui-grid中使用右键菜单ng-context-menu

自己的坑自己填

• 在项目里面为了省事用了ui-grid，刚开始看效果不错的！后来坑越来越多..这个坑印象比较深记录一下好了

关于ui-grid

• 官网:http://ui-grid.info/

• 怎么说呢，文档还是比较全的（有时候要翻GFW)，star也很多，遇到的问题网上也基本上能找到解决方法

需求

在ui-grid渲染的表格里面使用右键菜单，同时双击row执行指定方法。效果就是酱紫：

思路

• 先找了一下issue,看到一个：这里
  作者说的很清楚可以使用自定义rowTemplate然后编写自定义指令监听右键点击。

• 因为之前用过一个右键菜单的插件ng-context-menu，就又搜索了一下，这里
  发现已经有人在用了，而且看似没啥问题

代码

首先自定义rowTemplate

  $scope.gridOptions = {
    paginationPageSizes: [30, 50, 100],
    paginationPageSize: 30,
    enableRowSelection: true,
    enableSelectAll: false,
    enableRowHeaderSelection: false,
    multiSelect: false,
    noUnselect : true,
    enableSorting: false,
    enableColumnMenus: false,//显示下拉箭头
    useExternalPagination: true,
    rowTemplate: './src/case/views/rowTemplate.html'
  };

上面的其他属性官方文档上讲的很详细

然后是rowTemplate和右键菜单html

<div ng-class="row.entity.status | rowStyleFilter"  context-menu="grid.api.selection.selectRow(row.entity)" target="myMenu" ng-dblclick="grid.appScope.goSomewhere()">
  <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
       class="ui-grid-cell" ng-class="row.entity.status | rowHeaderStyleFilter:col.isRowHeader" ui-grid-cell >
  </div>
</div>

<div class="dropdown position_fixed" id="myMenu">
  <ul class="dropdown-menu" role="menu">
    <li>
      <a role="menuitem" tabindex="1" href="javascript:;" ui-sref="xxx">
        详细资料
      </a>
    </li>
    <li>
      <a role="menuitem" tabindex="2" href="javascript:;" ui-sref="yyy">
        刷新
      </a>
    </li>
  </ul>
</div>

我这里因为自定义了row的颜色和rowHeader的图标，主要看这句就可以了：

context-menu="grid.api.selection.selectRow(row.entity)" target="myMenu" ng-dblclick="grid.appScope.goReport()"

1. 其中context-menu是ng-context-menu的指令，传一个回调函数，会在右键的时候调用，我这里的回调函 数是ui-gridpublicApi中的selectRow，就是右键单击的话就先选中这一行

2. target后面跟的是右键要显示的div的id

3. ng-dblclick后面跟的是双击的方法（这个在后面appScope讲）

这时候基本上就差不多了，值得一提的是我用了ui-router路由，菜单dom如果和rowTemplate放在一起会出现错位问题，所以我的菜单dom往上放了几层
再者就是position_fixed这个class：

.position_fixed{
  position: fixed;
  z-index: 9999;
}

层级不够可以调

关于ui-grid的scope问题

在ui-grid的rowTemplate里面是不能用controller里的方法的，具体也不太清楚，不过有解决办法，就是定义appScope
controller中代码如下：

  $scope.gridOptions.appScopeProvider = {
    goSomewhere : function(){
        //code here 
    }
  };

我上面的ng-dblclick就调用的这个方法

版本

• angularjs: 1.3.20

• angular-ui-grid: 3.0.7

• ng-context-menu: 1.0.1