Question

我使用ng-grid在我的表格中定制了checkboxCellTemplate。我想在那里显示复选框和一些文字，但我不知道如何设置此列的宽度。

不幸的是minWidth不适用于复选框列。

$scope.gridOptions = { 
    data: 'myData',
    showSelectionCheckbox: true,
    checkboxCellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /> Some text here</div>',
};

Here is JSFiddle。任何iedas？

Answer 1

我发现最好避免通过CSS覆盖ngGrid的列宽和放置

更好的路线是放弃showSelectionCheckbox选项并将自己的复选框放在columnDefs中，如此

$scope.gridOptions = {
        data: 'myData',
        columnDefs: [{
            field: '',
            minWidth: 120,
            cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /> Some text here</div>'
          }, {
            field: 'name'
          }, {
            field: 'age'
            }
        ]

    };

http://jsfiddle.net/k9kCr/19/

Answer 2

在查看了他们的源代码和文档之后，我同意ng-grid没有提供任何/许多方便的钩子来扩展或自定义它提供的行选择功能上的显示和文本。

但是，它们确实为其生成的行和列提供了一致的命名方案。例如，第一列标记为colt0，第二列标记为colt1，依此类推。这些生成的类也应用于ng-repeat中的每一行，但这里不太重要。

在任何情况下，我都可以应用一些CSS来扩展显示以扩大选择列并显示您提供的文本。我对CSS不是特别满意，因为我不得不用!important覆盖一些内联样式属性来突破特殊规则。

无论如何，这是 a 解决方案：

/* This widens the length of the first column */
.colt0 {
    width: 140px !important;
}

/* The second (zero-indexed!) column needs to be moved out to accomodate a wider first column */
.colt1 {
    left: 150px !important;
}

/* Move the position of the header checkbox a few pixels left */
.ngSelectionHeader {
    left: 11px;
}

/* Move the position of the viewport checkboxes to accomodate their new wider row containers */
.ngSelectionCell {
    margin-left: 11px;
}

JSFiddle示例：http://jsfiddle.net/MasterXen/9BpUR/2/

Answer 3

您可以通过columnDefs执行此操作。

    app.controller('MyCtrl', function ($scope) {
        $scope.myData = [
            {name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}
        ];
        $scope.gridOptions = {
            data: 'myData',
            showSelectionCheckbox: true,
            columnDefs: [
                {field: '', width: '50px'
                },
                {field: 'name'
                },
                {field: 'age'
                }
            ]
        };
    });

Working Fiddle

在ng-grid中设置“选择复选框”列的宽度

3 个答案: