【AngularJS】ui-grid-selection 示例

最新推荐文章于 2021-02-22 20:51:53 发布

原创最新推荐文章于 2021-02-22 20:51:53 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #ViewUI

本文介绍了一个使用 Angular 和 UI Grid 插件实现的数据表格示例。该示例展示了如何配置 UI Grid 的基本设置，包括行选择、列定义及数据加载等功能，并通过一个具体的代码实例进行了说明。

参考：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的上方，示例图如下

[img]http://dl2.iteye.com/upload/attachment/0118/2727/b7c6e9c9-1f41-3731-af76-af072edb1c13.png[/img]