本身的坑本身填

• 在项目内里为了费事用了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