我正在尝试通过选择标题复选框来选择行中的所有复选框。我正尝试在旧版应用程序中添加此功能,由于种种原因而无法更新到其他版本。
我认为将enableHeaderRowSelection设置为true应该可以,但这没有用。现在,我什至不能用鼠标单击来选中标题复选框。
我是ui-grid的新手,感谢您的帮助。
html代码:
<div
class="bootstrap-grid testGrid"
ui-grid="$ctrl.testGrid.gridOptions"
ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection ui-grid-pagination grid-resizer-fill grid-header="#browseHeader">
</div>
组件js:
(function(){
angular.module('testApp.process')
.component('testCheck', {
templateUrl: 'html/check/test.html',
controller: TestController
});
TestController.$inject = ['$scope', 'testService', 'uiGridService', 'browseGridService', 'modal'];
function TestController($scope, testService, uiGridService, browseGridService, modal){
/** Bindings **/
var $ctrl = this;
/** Functions **/
$ctrl.$onInit = onInit;
/** Implementation **/
function onInit(){
// init ui-grid
$ctrl.testGrid = uiGridService.create({
elementName : 'Test',
storageName : 'testGrid',
loadData : loadData
});
$ctrl.testGrid.gridOptions.appScopeProvider.onDblClick = function(row) {};
$ctrl.testGrid.gridOptions.enableSorting = true;
$ctrl.testGrid.gridOptions.enableSingleSorting = true;
$ctrl.testGrid.gridOptions.multiSelect = true;
$ctrl.testGrid.gridOptions.enableHeaderRowSelection = true;
// Add browse ui-grid components to scope
angular.extend($ctrl, browseGridService.getScope($ctrl.testGrid));
// grid sorting callback
$ctrl.testGrid.onSort = loadData;
// grid columns
$ctrl.testGrid.getDefaultColumns = function() {
return [
{
field : 'select',
headerCellTemplate:'<input type="checkbox" ng-model="row.entity.select"/>',
cellTemplate : '<input type="checkbox" ng-model="row.entity.select"/>',
width: 150,
selected : true
},
{
displayName : 'File Name',
field : 'fileName',
cellTemplate : 'html/common/cell-file-folder.html',
selected : true
},
{
displayName : 'Date Deleted',
field : 'dateDeleted',
cellFilter : 'browseDateFilter',
width : 180,
cellTemplate : 'html/common/cell-date.html',
selected : true
},
{
displayName : 'Deleted By',
field : 'deletedBy',
width : 180,
cellTemplate : 'html/common/cell.html',
selected : true
},
{
displayName : 'Former Location',
field : 'formerLocation',
cellTemplate : 'html/common/cell.html',
selected : true
}]
};
$ctrl.testGrid.setColumns();
// init data
loadData();
}
// grid refresh
function loadData() {
$ctrl.testGrid.gridOptions.data = [
{
"fileName":"Test 1",
"dateDeleted": "02/12/2019",
"deletedBy":"Test-AO5",
"formerLocation":"/"
},
{
"fileName":"Test 2",
"dateDeleted": "02/13/2019",
"deletedBy":"Test-AO6",
"formerLocation":"/"
},
{
"fileName":"Test 3",
"dateDeleted": "02/14/2019",
"deletedBy":"Test-AO7",
"formerLocation":"/"
},
]
}
} } )();