ui-grid 列拖拽问题

angular 的 ui-grid 在项目中使用时出现了列拖拽时，拖拽的表头跟不上鼠标的问题，特写了个小 demo 查找问题所在，结果发现了另一个拖拽问题：有横向滚动条时，拖拽的元素看不见，虽然拖拽效果是好使的。。。

把 node_moudles 中的 ui-grid 文件夹的相关文件都拿来了：

 

样例代码：

<!DOCTYPE html>
<html ng-app='myApp'>
    <head>
        <meta charset='utf-8'>
        <link rel="styleSheet" href="ui-grid.css"/>
        <script src='angular.js'></script>
        <script src='ui-grid.js'></script>
        <style>
            .myGrid {
                 width: 1000px;
                 height: 250px;
            }
        </style>
    </head>
    <body>
        <div ng-controller='myCtrl'>
            <div ui-grid="gridOptions" class="myGrid" ui-grid-move-columns></div>
        </div>
        <script>
            angular.module("myApp",['ng', 'ui.grid', 'ui.grid.moveColumns'])
            .controller("myCtrl",function($scope){
                $scope.gridOptions = {
                    enableSorting: false,
                    columnDefs: [],
                    data: [],
                    onRegisterApi: function (gridApi) {
                        $scope.callListApi = gridApi;
                        //列的位置移动的时候触发
                        gridApi.colMovable.on.columnPositionChanged($scope, function (colDef, prePos, newPos) {
                            console.log(colDef, prePos, newPos);
                        })
                    }
                }
                
                for(var i = 0; i < 30; i++) {
                    var obj = {
                        field: i + 'name',
                        minWidth: 120,
                        headerCellTemplate: '<div class="ui-grid-cell-contents"' + 
                        '>index : ' + i  + '</div>'
                    }
                    $scope.gridOptions.columnDefs.push(obj);
                }
                for(var i = 0; i < 5; i++) {
                    var obj = {}
                    for (var j = 0; j < 30; j++) {
                        obj[j + 'name'] = parseInt(Math.random()* 100);
                    }
                    $scope.gridOptions.data.push(obj)
                }
            })
        </script>
    </body>
</html>

 

看了一遍底层关于 moveColumns 的代码。。。也没发现有关移动的额外监听事件。。。

路过的大神看一看啊。待解决。

posted @ 2018-01-25 17:58  名字不好起啊  阅读(907)  评论(0)  编辑  收藏  举报