[AngularJS] ui-grid-selection example

Reference: http://my.oschina.net/gmd/blog/670895
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <title>ui-Grid Example01</title>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>

    <script type="text/javascript" src="bower_components/angular-ui-grid/ui-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.css" />

    <style type="text/css">
        .grid {
            width: 800px;
            height: 50px; /* The test found that the height attribute only affects the Header row, which is strange*/
        }
    </style>

</head>

<body ng-controller="MyCtrl">
    <div>
        <ol>
            <li>名称：{{testRow.name}}</li>
            <li>年龄：{{testRow.age}}</li>
            <li>生日：{{testRow.birthday}}</li>
        </ol>
    </div>

    <div ui-grid="gridOptions" class="grid" ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize>
    </div>

</body>
<script>
        var app = angular.module('myApp', ['ui.grid','ui.grid.selection']);
        
        app.controller('MyCtrl', function($scope,i18nService) {
            // // globalization;
            i18nService.setCurrentLang("zh-cn");
            
            $scope.gridOptions = {
                // data: 'myData',
                // columnDefs: [{ field: 'name', displayName: '名字',
                //                  width: '10%',
                // enableColumnMenu: false,// Whether to display the column header menu button
                //                  enableHiding: false,
                //                  suppressRemoveSort: true,
                // enableCellEdit: false // is it editable
                //              },
                //              { field: "age"},
                //              { field: "birthday"},
                //              { field: "salary"}
                //             ],
                
                //------------ Select----------------------
                enableRowSelection : true, // Whether row selection is available, the default is true;  
                enableFullRowSelection : true, // does not work...
                enableSelectAll: false,
                rowHeight: 30,
                modifierKeysToMultiSelect: false ,//The default is false, when it is true, you can only press the ctrl or shift key for multi-select, multiSelect must be true;  
                multiSelect: false , // Whether multiple selections can be made, the default is true;  
                noUnselect: false,//default false, whether it can be unselected after selection  

                //---------------api---------------------
                onRegisterApi: function(gridApi) {
                    $scope.gridApi = gridApi;

                    // row selection event
                    $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
                        if(row){
                            $scope.testRow = row.entity;
                        }
                     });
                }
            };
            
            var getPage = function(curPage, pageSize) {
                var firstRow = (curPage - 1) * pageSize;
                $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);
            };
            
            var mydefalutData = [
                { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
                { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
                { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
                { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
                { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
                { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
                { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
            
            getPage(1, 5);
        });   
    </script>

</html>
The height of the ui-grid is 50px, and its content does not affect the height of the div, which is rather strange. The browser is chrome, so work around it and place the div that displays the content above the ui-grid. The example is as follows
[AngularJS] ui-grid-selection example

Guess you like
