javascript - ng-grid展开和折叠行

标签 javascript jquery html angularjs ng-grid

我正在尝试为 ng-grid 实现展开和折叠行,基本上我们这里有什么 http://datatables.net/examples/api/row_details.html如果您单击“加号图标”,则会显示更多详细信息。

我在这里看到过类似的问题,但没有解决方案。 https://github.com/angular-ui/ng-grid/issues/517

有人知道如何实现吗?

感谢任何帮助。

var app = angularexpand('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    somedata: "data to be expanded in another",
    moredata: 1
  }, {
    somedata: "b data to be expanded in another",
    moredata 2
  }, {
    somedata: "c data to be expanded in another",
    moredata: 3
  }, {
    somedata: "d data to be expanded in another",
    moredata: 4
  }, {
    somedata: "e data to be expanded in another",
    moredata: 5
  }];
  $scope.gridOptions = {
    data: 'myData'
  };

  $scope.expandRow = function(e) {
    e.preventDefault();
    var getData = {
      somedata: '',
      moredata: ''
    };
    $scope.gridOptions.selectItem(index, false);
    $scope.myData.splice(index + 1, 0, getData);
    $(this.row.elm).append('<div>' + this.row.entity.somedata + '</div>');
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MyCtrl">
  <div class="gridStyle" ng-grid="gridOptions"></div>
  <button ng-click="expandRow($event)">add row</button>
</body>

最佳答案

我从来没有用 ng-grid 做过这个,但是,已经用一个普通的表实现了这个功能。您可以编写一个自定义指令来解决这个问题。

下面几行应该可以解决问题。此示例未在 JSFiddle 中测试。这里的关键是使用“ng-repeat-start”和“ng-repeat-end”,而不仅仅是“ng-repeat”。

HTML:

<div ng-controller="MyCtrl">
    <table class="table dataTable no-hover">
	<tbody>	
	    <tr ng-repeat-start="row in rows" ng-init="ind = $index"> 
		<td ng-click="rowExpanded[row.name]=!rowExpanded[row.name]"></td>
                <td ng-repeat="val in row.vals" class="column"> </td>
            </tr>
            <tr id="rowexpand" ng-show="rowExpanded[row.name]" colspan="100%" ng-repeat-end></tr>
	</tbody>
    </table>
</div>

AngularJS Controller :

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.rowExpanded=[];
    
    $scope.rows= [
        { "name": "row1",
         "vals" :[1, 2, 3, 4, 5], 
        },
         { "name": "row1",
         "vals" :[1, 2, 3, 4, 5], 
        }
    ]
        
}

关于javascript - ng-grid展开和折叠行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23617030/

相关文章:

javascript - AppModule 中导入的共享模块

javascript - HTML 注释 &lt;!-- 是否充当 JavaScript 中的单行注释,为什么?

javascript - 检测所有图像何时加载到 Angular.js View 中

javascript - 全日历事件呈现性能问题

javascript - 如何在选项文本上添加文本而不删除值?

c# - 设置包含动态添加图像的div的高度和宽度

javascript - 我应该使用哪种方法从文本中提取指定的数据?

javascript - select2 标签 selectBox 的预选值

javascript - jQuery onclick 事件在 Bootstrap 轮播中未触发

javascript - 无法将消息从网页传递到 Chrome 扩展程序