ng-grid 

 <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
 </body>

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { 
        data: 'myData',
        showGroupPanel: true,
        columnDefs: [{field: 'name', displayName: 'Name',enableCellEdit: true},
                     {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}],//列名列样式
        rowTemplate:'<div style="height: 100%" ng-class="{green: row.getProperty(\'age\') < 30}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                     '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
                     '<div ng-cell></div>' +
                     '</div></div>',//行样式
        jqueryUITheme: true,//主题
        enableCellSelection: true,//选择行

        enableRowSelection: false,
        enableCellEditOnFocus: true,
}; });



 

//取消选择


$scope.gridOptions.selectAll(false);
$scope.selectedItems.length=0;




ref:http://angular-ui.github.io/ng-grid/
posted @ 2015-04-28 00:02  fannet  阅读(284)  评论(0)    收藏  举报