<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view ui-grid-selection ui-grid-resize-columns class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.edit','ui.grid.treeView', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$templateCache', function($scope, $http, $templateCache) {
$templateCache.put('ui-grid/selectionRowHeader',
"<div class=\"ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\"><ui-grid-selection-row-header-buttons></ui-grid-selection-row-header-buttons></div></div>"
);
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
$scope.isSelectable = function(entity) {
console.log(entity);
if (entity.company === 'Enersol')
return false;
else
return true;
}
var rowTemplate = '<div>' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>';
$scope.gridOptions = {
rowTemplate: rowTemplate,
enableColumnResizing:true,
showTreeExpandNoChildren: false,
enableSorting: true,
columnDefs: [{
field: 'nameCn'
}, {
field: 'nameEn'
}],
isRowSelectable: function(row) {
if (row.entity.selected && row.entity.isLeaf) {
row.grid.api.selection.selectRow(row.entity); // 选中行
}
},
onRegisterApi: function(gridApi) {
var self = $scope;
gridApi.selection.on.rowSelectionChanged(self, function(rows) {
var selections = angular.copy(gridApi.selection.getSelectedRows());
// listenGridChanged(self,selections,utilFuncService,0);
});
}
};
$scope.gridOptions.data = [{
"id": 1,
"pid": null,
"nameCn": "系统管理",
"nameEn": "sys",
"icon": "glyphicon glyphicon-th",
"url": "",
"urlType": "entity",
"openType": 1,
"des": "",
"sort": null,
"isEnable": true,
"parentId": null,
"children": [{
"id": 99,
"pid": 1,
"nameCn": "权限管理平台",
"nameEn": "sys_admin",
"icon": "",
"url": "/dyadmin",
"urlType": "0",
"openType": 1,
"sort": null,
"isEnable": true,
"parentId": 1,
"children": [{
"id": 100,
"pid": 99,
"nameCn": "用户信息",
"nameEn": "sys_userMsg",
"icon": "glyphicon glyphicon-eye-open",
"url": "/userShow",
"urlType": "0",
"openType": 1,
"sort": 1,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 101,
"pid": 99,
"nameCn": "用户管理",
"nameEn": "sys_userMgr",
"icon": "glyphicon glyphicon-eye-open",
"url": "/user",
"urlType": "0",
"openType": 1,
"sort": 2,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 102,
"pid": 99,
"nameCn": "角色管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/role",
"urlType": "0",
"openType": 1,
"sort": 3,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 103,
"pid": 99,
"nameCn": "菜单管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/menu",
"urlType": "0",
"openType": 1,
"sort": 4,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 104,
"pid": 99,
"nameCn": "Http请求管理",
"nameEn": "sys_http",
"icon": "glyphicon glyphicon-eye-open",
"url": "/asks",
"urlType": "0",
"openType": 1,
"sort": 5,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}],
"isLeaf": false,
"selected": false,
"$$treeLevel": 1,
"$$hasChildren": true
}],
"isLeaf": false,
"selected": false,
"$$treeLevel": 0,
"$$hasChildren": true
}, {
"id": 99,
"pid": 1,
"nameCn": "权限管理平台",
"nameEn": "sys_admin",
"icon": "",
"url": "/dyadmin",
"urlType": "0",
"openType": 1,
"sort": null,
"isEnable": true,
"parentId": 1,
"children": [{
"id": 100,
"pid": 99,
"nameCn": "用户信息",
"nameEn": "sys_userMsg",
"icon": "glyphicon glyphicon-eye-open",
"url": "/userShow",
"urlType": "0",
"openType": 1,
"sort": 1,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 101,
"pid": 99,
"nameCn": "用户管理",
"nameEn": "sys_userMgr",
"icon": "glyphicon glyphicon-eye-open",
"url": "/user",
"urlType": "0",
"openType": 1,
"sort": 2,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 102,
"pid": 99,
"nameCn": "角色管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/role",
"urlType": "0",
"openType": 1,
"sort": 3,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 103,
"pid": 99,
"nameCn": "菜单管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/menu",
"urlType": "0",
"openType": 1,
"des": "",
"sort": 4,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 104,
"pid": 99,
"nameCn": "Http请求管理",
"nameEn": "sys_http",
"icon": "glyphicon glyphicon-eye-open",
"url": "/asks",
"urlType": "0",
"openType": 1,
"des": "",
"sort": 5,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}],
"isLeaf": false,
"selected": false,
"$$treeLevel": 1,
"$$hasChildren": true
}, {
"id": 100,
"pid": 99,
"nameCn": "用户信息",
"nameEn": "sys_userMsg",
"icon": "glyphicon glyphicon-eye-open",
"url": "/userShow",
"urlType": "0",
"openType": 1,
"sort": 1,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 101,
"pid": 99,
"nameCn": "用户管理",
"nameEn": "sys_userMgr",
"icon": "glyphicon glyphicon-eye-open",
"url": "/user",
"urlType": "0",
"openType": 1,
"sort": 2,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 102,
"pid": 99,
"nameCn": "角色管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/role",
"urlType": "0",
"openType": 1,
"sort": 3,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": true,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 103,
"pid": 99,
"nameCn": "菜单管理",
"nameEn": "sys_role",
"icon": "glyphicon glyphicon-eye-open",
"url": "/menu",
"urlType": "0",
"openType": 1,
"des": "",
"sort": 4,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 104,
"pid": 99,
"nameCn": "Http请求管理",
"nameEn": "sys_http",
"icon": "glyphicon glyphicon-eye-open",
"url": "/asks",
"urlType": "0",
"openType": 1,
"des": "",
"sort": 5,
"isEnable": true,
"parentId": 99,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 2,
"$$hasChildren": false
}, {
"id": 76,
"pid": null,
"nameCn": "父菜单",
"nameEn": "fatherMenu",
"icon": "",
"url": "",
"urlType": "entity",
"openType": 0,
"sort": null,
"isEnable": true,
"parentId": null,
"children": [{
"id": 77,
"pid": 76,
"nameCn": "子菜单2",
"nameEn": "subMenu",
"icon": "",
"url": "",
"urlType": "",
"openType": 0,
"sort": null,
"isEnable": true,
"parentId": 76,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 1,
"$$hasChildren": false
}],
"isLeaf": false,
"selected": false,
"$$treeLevel": 0,
"$$hasChildren": true
}, {
"id": 77,
"pid": 76,
"nameCn": "子菜单2",
"nameEn": "subMenu",
"icon": "",
"url": "",
"urlType": "",
"openType": 0,
"sort": null,
"isEnable": true,
"parentId": 76,
"children": [],
"isLeaf": true,
"selected": false,
"$$treeLevel": 1,
"$$hasChildren": false
}]
}]);
.grid {
width: 500px;
height:400px;
}
.red { color: red !important; }
.blue { color: blue; }