【AngularJS】ui-grid-selection 示例

参考：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; /* 测试发现，height属性只影响到Header行，比较奇怪 */
        }
    </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) {
            // // 国际化；
            i18nService.setCurrentLang("zh-cn");
            
            $scope.gridOptions = {
                // data: 'myData',
                // columnDefs: [{ field: 'name', displayName: '名字', 
                //                  width: '10%', 
                //                  enableColumnMenu: false,// 是否显示列头部菜单按钮
                //                  enableHiding: false,
                //                  suppressRemoveSort: true,
                //                  enableCellEdit: false // 是否可编辑
                //              },
                //              { field: "age"},
                //              { field: "birthday"},
                //              { field: "salary"}
                //             ],
                
                //----------- 选中 ----------------------
                enableRowSelection : true, // 行选择是否可用，默认为true;  
                enableFullRowSelection : true, //不起作用...
                enableSelectAll: false,
                rowHeight: 30,
                modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;  
                multiSelect: false ,// 是否可以选择多个,默认为true;  
                noUnselect: false,//默认false,选中后是否可以取消选中  

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

                    //行选中事件
                    $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>
ui-grid的高度为50px，其content没有影响到div的高，也比较奇怪，浏览器为chrome，故变通一下，将显示内容的div放在ui-grid的上方，示例图如下
【AngularJS】ui-grid-selection 示例

猜你喜欢
