ng-grid checkbox功能的使用

ng-Grid api: http://blog.csdn.net/lylliu/article/details/44962679

html:

<!DOCTYPE html>
<html ng-app="ngGridTestApp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/jquery-ui.css">
    <link rel="stylesheet" href="style/ng-grid.css">
    <title>Title</title>
</head>
<body ng-controller="ngGridTestController">
<div style="height: 500px" ng-grid="ngGridTest"></div>

<script src="framework/jquery.js"></script>
<script src="framework/angular.js"></script>
<script src="framework/ng-grid.js"></script>
<script src="myJs/ngGridTest.js"></script>
</body>
</html>

javaScript:

angular.module('ngGridTestApp',['ngGrid'])
    .controller('ngGridTestController',function($scope){
        var idTemplate = "<div style=\'background-color: #e4b9b9;text-align: center\'>\n    <span>{{row.entity.id}}</span>\n</div>";
        var nameTemplate = "<div style=\'background-color: aquamarine;text-align: center\'>\n    <span>{{row.entity.name}}</span>\n</div>";
        var ageTemplate = "<div style=\'background-color: aqua;text-align: center\'>\n    <span>{{row.entity.age}}</span>\n</div>";
        $scope.dateSource = [
            {id:1, name:'千山鸟飞绝',age:20},
            {id:2, name:'万径人踪灭',age:21},
            {id:3, name:'孤舟蓑笠翁',age:22},
            {id:4, name:'独钓寒江雪',age:23}
        ];
        $scope.myDefs = [
            {field: 'id', width: '25%', displayName: 'ID', cellTemplate: idTemplate},
            {field: 'name', displayName: '姓名', cellTemplate: nameTemplate},
            {field: 'age', width: '27%', displayName: '年龄', cellTemplate: ageTemplate}
        ];
        $scope.ngGridTest = {
            i18n: 'zh-cn',
            data: 'dateSource',
            columnDefs: $scope.myDefs,
            selectedItems: $scope.selectedItem,//选择某行这一行的对象就赋值给$scope.selectedItem
            multiSelect: false,//不可多选
            showSelectionCheckbox: true//每行显示checkbox
        }
    });

 

posted @ 2017-07-06 15:09  发福大叔  阅读(1996)  评论(7)  编辑  收藏  举报